Learn how to use the Lottie Widget as a button and set it to play an animation and open a menu popup, upon clicking it. These subtle animations 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
✔︎ Use “on click” trigger settings to make animations play according to your preference
✔︎ Add a dynamic action link that toggles a menu popup
✔︎ And much more!
hile its zip from Elemental today I’ll
show you a creative way to use the lotty
widget as a button and set it to play an
animation and open a menu pop-up at the
same time
these subtle animations can make a big
difference really improving the UX and
increasing engagement so let’s see how
it’s done
from the homepage I’ll go ahead and
click here to edit the header then
search for and drag in the latte widget
I’ll change the source to external URL
because I will be using this online
Lottie animation link
then simply paste it let’s first design
it a bit before making it work in style
I’ll decrease the width of it so it fits
in nicely
and to change the color to black simply
go to CSS filters and set the brightness
to zero
now let’s bring it to life first I’ll
make sure the animation plays according
to my preference
I’ll set the trigger to unclick so the
animation starts playing upon clicking
the Lottie button
gret next it’s time to make it open and
close a pop-up for this tutorial I’ll
use a pre design menu pop-up let’s
quickly check it out
as you can see it takes up the entire
screen giving it that cool effect when
it opens I also hit the close button
because the lotty widget should both
open and close the pop-up when toggling
it meaning it needs to be clickable at
all times therefore we need to make sure
the entire header appears on top of the
pop-up so let’s go back to the header
and see how it’s done
we will use the z-index setting to
organize the stack order of our elements
an element with the greatest tech order
is always in front of an element with
the lower one you can set the stack
number on any section column or widget
under the Advanced tab I’ll go ahead and
set the Z index for the entire section
I’ll set it to 10,000 so it will always
be on top especially above the pop-up
okay it’s time to set the latte widget
to toggle the pop-up in the lotty
drop-down I’ll change the link to custom
URL and click on the dynamic tags icon
then under actions choose pop-up
the action to toggle lastly search for
the pop-up and selected
let’s update and check it out
you
cool the lotty widget both opens and
closes the menu pop-up well that’s it
now you know how to use the Lottie
widget as a button and set it to play an
animation and toggle the menu pop-up at
the same time these subtle animations
can make a big difference
just like these animated social icons
for example set to play on Havre
so go ahead add your own Lottie
animations to your designs they’ll
really help increase engagement and make
your site stand out without touching any
code have fun playing around and don’t
forget to subscribe to our YouTube
channel for more tips and tutorials ciao
for now
