Learn how to use the Lottie Widget and add beautiful animations to your websites, turning them into a moving, one-of-a-kind experience.
In this tutorial you’ll learn how to:
✔︎ Add your animation using an external link or upload your own JSON file
✔︎ Set the trigger: Viewport, Scroll, Hover, Click, None
✔︎ Play around with additional options: Renderer, Loop, Hover out, Reverse Animation
✔︎ And much more!
Hey there, it’s Aviva from Elementor.
Today, I’ll show you how to add impressive animations to your site, using Elementor’s Lottie Widget.
Here, we have a web page about cycling, with a colorful PNG image of a cyclist on a bike. It has a motion effect applied to it, so that the image appears to be gliding across the page as we scroll. But you know what would be even better? To have the cyclist appear to be pedaling the bike, while he glides across.
Enter Lottie!
Lottie animations are animations rendered from .json files. Small in size, but large in impact, they can be combined with other options for even more possibilities. So there’s no need to shy away from using animation files on your website and risk slowing down your site. (Lottie animation files are virtually weightless) Let’s dive in and see how it works.
I’ll go ahead and right click to delete the image widget, since we’ll be using the Lottie Widget instead. Now, search “Lottie” in Widgets, and drag in the Lottie Widget.
We have two options for the source. We’ll be using a Media File for our final animation, but first we’ll go over the External URL option. For this option, we can use a link to an animation online. Let’s visit the Lottiefiles website to search for something that suits our page. The Lottiefiles website has loads of free and paid files we can use on our website.
This cycling file looks like it could work; and, it’s free! Open it, and you can see that there are several options, including a link to the animation, animation speed, and background color chooser. Click the clipboard under Lottie Animation URL to copy the link. Paste it here in the External URL field and the animation is loaded. You have a variety of settings and styling options, which we’ll go over shortly, in the next animation.
———–
Switch to Media File for the Source, and click the icon to upload your .json file. Insert it. If it’s the first time you’ve uploaded a json file, you’ll get this warning. Before clicking Enable, please make sure that this file is from a reliable source, as .json files may potentially include malicious content.
Over here, we can align the animation.
With Caption, you can control the text you see below the animation. Choose to link the Title or Caption from the image properties, or add a Custom Caption by entering text or selecting Dynamic tags. You can change the alignment, Text color, and Typography, as well as the spacing.
We don’t need a caption for our animation, so go ahead and delete it.
If you’d like the animation to link elsewhere, such as for a button, you can add a link here, and you will see all the standard link options, such as open in a new window and no follow, as well as dynamic tags.
——-
Next click the Settings dropdown to control the animation’s behavior. First select the Trigger, which as it sounds, determines what action will set off the animation. By default, it’s set to Viewport, so it will begin as soon as the animation comes into view. We’ll go through the other triggers shortly, but first we’ll review the settings under Viewport, as most of them apply to other Triggers as well.
The Viewport setting, which is available for the Viewport and Scroll triggers, determines when to begin the movement, based on viewport height, meaning, the visible size of the device screen.
Loop will set the animation to continuous, and when selected, you can choose how many times you’d like the animation to play. Leave it empty for an infinite loop. As it sounds, Play Speed sets the speed of the animation.
Reverse animation will change it to the opposite direction.
With start point and end point, you can change where in the loop the animation begins and ends, so you can choose to only play a piece of the animation from and to whichever point works for your design.
Depending on your needs, here you can choose the Renderer type, SVG or Canvas
To improve your page loading time, set the Lazyload switch to YES, and the animation will load only when visible to the user.
——
Now go back to the Trigger options and select On Click to play the animation when clicked. If you added a link to the animation, you can set how long the animation should play before the link is opened, here, in Link Timeout.
The next Trigger is On Hover and as it suggests, the animation will play when hovered over. And here, on Hover out, we can select to Reverse or Pause, when we move the cursor off the animation and whether the animation begins when hovering over the animation, column, or the whole section.
The Scroll Trigger starts animation upon scrolling. And you can choose whether the effects should be relative to the viewport or the entire page.
Lastly we have the None Trigger. The animation will begin playing as soon as the page loads.
—————
Moving on to Style, where you can set the animation width and max width, as well as its Normal and Hover Styles.
Drag the opacity to make the animation semi-transparent and play with the CSS filters to change the blur, brightness, contrast, saturation, and hue. Leave the filters off for the hover state so when you mouse over, it will really pop. Set the transition duration to gradually reach the hover state. Cool!
You can select any of these settings for the hover state as well.
The Lottie animation settings are complete, and our cyclist is moving those wheels, but he’s not actually getting anywhere. Let’s add a motion effect so he can get across the terrain.
Click the Motion Effects dropdown and switch Scrolling Effects ON. Click Horizontal scroll and select To Left. Set the speed to 7.
Now let’s update and preview. Look at him go!
There are multiple ways you can apply the Lottie widget to make your design stand out, such as this button in the header, for example. It may look like a regular button, but in fact, it’s a Lottie animation.
And that’s it. Now you know how to use Elementor’s Lottie widget and add eyecatching animations to your site to really make them stand out. These are just a few examples of endless animation possibilities. So drag that Lottie widget in and get creative. We can’t wait to see what you come up with.
Thanks for watching. For more tutorials subscribe to our Youtube channel.
