Learn how to use the Lottie Widget as a button and set it to both play an animation and download a free eBook. Adding small animations to your designs can make a big difference, really improving the UX and increasing engagement.
In this tutorial you’ll learn how to:
✔︎ Add Lottie Animations via external URLs or custom JSON uploads
✔︎ Use “on click” trigger settings to make animations play according to your preference
✔︎ Add a custom download attribute to links, so they automatically download files
✔︎ 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
you’re in 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 and
Elementor before we get to work on 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 we’ll 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
under the other elements
in source we can choose to use either a
JSON media file or an external URL the
Lahti files website has lots of good
options so we’ll select external URL now
go to the Lahti files site to search for
an animation this one looks good open it
and click the clipboard icon to copy the
URL back in the element or 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 will 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 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 zero to change its color
to black let’s create some space above
the animation in advanced unlink the
padding to set individually and set the
top to 35% bear the animation is ready
let’s update and preview
and here’s our scroll animation inviting
us to interact with it me and that’s all
there is to creating an interactive
scroll animation and Elementor
for more tutorials subscribe to our
YouTube channel thanks for watching
you
