Elementor Animations
Brighten up your Elementor visitor experience with custom and unique animations. Animated icons, video backgrounds and more.
Types of Elementor Animations
Test out some free animations for your website. Download and install in minutes.
Frequently Asked Questions
Elementor animations for sale, download a la carte. Custom colors available as needed.
Start From Scratch
Have your website ready but not sure where to start? Get in touch and we can adventure together.
Type of Elementor Animations
Elementor and Elementor Pro support a wide range of animations. Below is a list of some of the most popular animations and formats. Typically, it’s best to reverse-engineer your animation format and start from the section of website that you’ll need to convey a specific message or user-action.
- Video Backgrounds
- JSON/Lottie Animations
- CSS Animations
- Interactive vs. Non-Interactive
- Elementor-Specific Animations
- SVG Animations
- GIF Format
- Parallax Movement
Video Background Animations
- HD Crisp Animations
- Autoplay & Click-Play Support
- Best For Complex Ideas
- Limited In Interactivity Support
Video background animations are ideal for full width sections within Elementor. While they are not interactive like an Lottie/SVG animation, the amount of visual effects that can be combined (glows, gradients, smoother transitions) is unmatched by the other formats.
One of the great things about Elementor is that the pro version comes with the capability to load a video from an external URL source (YouTube or Vimeo) so that the website doesn’t have to load the video itself on to the page, thus slowing down everything.
Text and other website elements can easily be placed to overlay any video background.
Lottie/JSON Animations
Recommended for icons and section callout animations
- Fast Loading Time
- Supports Transparent Background
- Supports User Interactions
- Limited on Advanced Graphic Design Features (i.e. shading, glow features)
(continous looping)
(hover over)
(click to play)
Above are three examples of Lottie animations when embedded on a WordPress website. Elementor pro has the capability to read and control factors from the JSON data. Variables include speed and interactivity among others. Resizing these types of animations to fit a particular section or text-area is very easy (directions below).
Lottie animations (created in JSON format) are ideal for animated icons and section callouts. The great thing about these types of animations is their out-of-the-box interactivity with Elementor Pro.
JSON format (stands for Java Script Object Notation) looks like a robot language, nothing decipherable to the human eye.
Below is an example of JSON animation looks like when created. It’s a bit more involved to create, as there is a design process from a vector-based program like Adobe Illustrator and then the export to JSON code before uploading to the website.
The major benefit of JSON (Lottie animations) is file size. JSON format is a fraction the size of a GIF and secondly it supports full transparency (meaning no background color and overlays on top of any app or website element). This can go a long way when developing interactive animations for any platform.
(example of what JSON format looks like before inplementing to website)
Combining Elements:
Depending on your developer’s capabilities Lottie animations can be made to enhance certain aspects of your site’s functionalities. For example, here is the same exact animation as above (hover over animation) but if you click on the animation you’ll be presented with a generic contact form from this site.
Lottie animations can be combined with other Elementor components for unique-branded combinations.
CSS Animations
- Fast Loading Time
- Supports Transparent Background
- Supports Advanced Graphic Design
- Limited On Interactivity
CSS animations are best used on advanced graphics, advanced in this instance meaning images that contain glow, shading or other graphic features. The circles hovering up and down are
Frequently Asked Questions & Information
Animation Load Time
When using a video background for a section within your website, WordPress or other, it’s best to consider total load time.
How Do I Install These Animations In Elementor?
Installation to Elementor Pro could not be easier. In fact, there’s a video tutorial below. Within Elementor Pro there is a widget called Lottie, upload like you might any other media file but in JSON format.
Elementor Animation Examples and Loading Samples
Browse below for samples in Lottie/JSON Format, the ideal format for Elementor (and really most WordPress websites). Due to the speed and versatility, Lottie animations can be installed, scaled and used as needed.
Can I Pause Animations Halfway Through Play?
Absolutely. Start or end your animation on a specific point in the animation.
How Do I Use Elementor Animations On My Website?
Once you’ve got the animation file uploaded to your site (instructions below), use these as highlights or callouts to specific buttons or pages.
What If I Don't Have Elementor Pro?
Don’t have Elementor Pro but still want to use these custom animations? No problem. I would highly recommend looking into the plugin called “Body Movin” for WordPress, it’s free. The only caveat is that some of the click-to-play features will not be enabled.
Click To Play & Hover Animation Settings
Want your animations to play on user interactions (based on their mouse movements or a click)? Control this, speed of play and more features within your Lottie animation widget.
How Many Times Do Animations Loop?
This is up to you! Lottie animations within Elementor can loop infinitely or just a single time, it’s completely up to you.
How Can I Use These Animations?
Here are some brief video tutorials to install and then customize your Lottie animations. Some of the features that Elementor pro include are play animation on click, hover or autoplay. Reach out with any question and I’d be glad to try and point you in the right direction.
How To Add Animations To Elementor Pro
In order to install a custom animation to Elementor, you’ll need it in JSON/Lottie format. This is one of the best formats for WordPress and Elementor due to it’s small file size and reduction in page loading time.
If you’ve downloaded the freebies from above, you’ll need to unzip the file before uploading to your site. Check out the video here to learn how to install.
(full screen available)
How To Resize Elementor Animations
In order to install a custom animation to Elementor, you’ll need it in JSON/Lottie format. This is one of the best formats for WordPress and Elementor due to it’s small file size and reduction in page loading time.
If you’ve downloaded the freebies from above, you’ll need to unzip the file before uploading to your site. Check out the video here to learn how to install.
(full screen available)