Elementor Tutorial

Elementor animation examples include animated icons, video backgrounds and more. Browse or request custom animations.

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. 

If you are looking for other Elementor tutorials and tips or just want to ask a question feel free to get in touch using one of the contact buttons around this page.

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 Background Animations

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

(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. 

JSON Animation using Lottie Format

(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

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)

Lottie Icon Animation Examples

Below are some lottie/svg animation examples. 

Customize Your Own - Get In Touch

Stuck With Elementor?

Get tailored help to your website and don’t waste money on agencies. Learn to build and manage your own site.

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible. 

Questions?

I’m Here To Assist You

Get In Touch

Use the brief form here to submit any questions and Jon will get back to you as soon as possible!