Learn how to create a scroll button with the Lottie Widget. Use animation to draw attention to your page and encourage interaction with your website.
In this tutorial you’ll learn how to:
✔︎ Add Lottie Animations via external URLs
✔︎ Link a Lottie animation to another section and automatically scroll to it, when clicked
✔︎ Use CSS Filters to further customize Lottie Animations
✔︎ And much more!
Hey there. It’s Aviva from Elementor.
In this tutorial, I’ll show you how to add lottie animations to your hero section.
Here on this Photography website, we have a downward pointing arrow icon in the hero section, which directs our visitors to click, and automatically scroll down the page to see more.
The arrow is a nice touch, but there’s nothing like animations to really grab your visitors’ attention and encourage them to interact with your website.
Ok, let’s get started, and open the page in Elementor.
Before we -get to work on/set up- our Lottie animation, we’ll need to define the section we’ll be linking to, so that when we click the animation, it will know where to take us.
Scroll down to the second section, and in Advanced, give it a CSS ID. Let’s name it food. This will indicate where the page should scroll, after clicking the animation.
Scroll back to the top, and, in Widgets, search for Lottie, and drag it in under the other elements.
In Source, we can choose to use either a JSON media file or an External URL. The Lottiefiles website has lots of good options, so we’ll select External URL . Now go to the Lottiefiles site to search for an animation. This one looks good. Open it, and click the clipboard icon to copy the URL. Back in the Elementor Editor, paste the link in the External URL field.
In Link, select Custom URL, and type in the pound sign and “food” to link it to the Food section, which we defined earlier.
In settings, switch the Loop to YES, to keep the interaction continuous. Drag the slider a bit to the right to increase the play speed.
In Style, set the width to 10%, and in CSS Filters, drag the Brightness slider down to 0 to change its color to black.
In Advanced, unlink the padding and set the top to 35%.
There. Now everything looks good.
Let’s update and preview. And here’s our scroll animation, inviting us to interact with it. Neat!
And that’s all there is to creating an interactive scroll animation in Elementor.
For more tutorials, subscribe to our YouTube channel. Thanks for watching!
We’ll leave the trigger on the default of Viewport, as well as on the default viewport settings, so the animation already plays when it’s in view”
Steps
Intro Visuals:
Page with icon arrow
Click
Page with animation
Click
Tutorial:
Start in Photography page
Scroll to Food section, select
CSS ID: food
Scroll back to top
Widgets
Search and Drag Lottie
Select External URL
CMD 2 (Go to Lottie files)
Type scroll down in search
Open
Click copy
CMD 1 (back to E)
External URL: Paste link
Select Custom URL
Paste #food
Settings:
Loop YES
Play speed: drag up, to 1.2
STYLE
Set width (%10)
CSS Filters: drag Brightness 0
Update
Preview
Click scroll
Back to top
