On this Webflow lesson we take a look at Lottie animations. How to add import lottie files in Webflow and how to setup triggered interactions with lottie files using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
okay guys another type of animation that
is very common and very popular nowadays
is the lottie animations and if you go
over to lodifiers.com
you have tons of animations created by
the community
i like to find you know some of the
animations that i might want to use
so our hamburger menu on on tablets and
below
how will that animation look like maybe
i want to have
the open state to be the burger but when
you open it i want to have a close
icon this lesson i want to show you how
we can start integrating these body
animations
in our web flow okay so i've already
downloaded one of these animations
and i'm just going to go into my web
flow select the current icon
you go to the toggle menu that icon
we're going to replace
we're going to include a lottie just by
searching lottie or by going to the plus
icon
i can go in search for media and then
simply select
loti animation over here i get asked
where do you want to pull this from you
look for a
lotty animation you upload that so i'm
going to find it here in my graphics
and i know that the close menu is the
one i want to use
and there we go we have the loti
animation if you can you can click
preview to see how that animation is
going to work
so just like that you get additional
options to modify the duration if you
want it to loop
constantly so it's constantly looping
because this is going to be based out of
a trigger
of when i click on a specific item do
this to the body
i don't want this to loop and that's it
let's add a class to this loading
animation and remove the icon
that we had and let's make this size
so let's call this
let's scale this down to 25 by 25
so that looks right 25 is a good number
maybe
a little bit bigger 30 by 30
and it's perfectly centered in the
middle thanks to the toggle menu which
already has some padding around
so now that we've added the animation
we have some settings that we want to
control so we go over to the
interactions panel
and what we want to do is have this
low t animation be triggered based on
when you click on the toggle menu okay
so
in order to do that we're going to
select the nav bar
the entire navbar component and on the
element trigger
we're going to click on add you're going
to see that because i've selected the
navbar
you're going to see an additional
trigger
which is when the navbar opens we click
on that
and we get a series of series of actions
that we want to do so when the menu
opens
what do you want it to do do you want to
fade or do some sort of animation these
are some pre-built animations that
webflow can give you this works well for
some of these elements
but not for what we're trying to do what
we're trying to do is control the low t
and we can also change some settings
like where do you want this to work do
you want to work all across
all devices and do you want to work on
specifically this navbar
or across the entire class of navbar
so we want to select class navbar
because if we have multiple
pages we then don't have to worry about
this interaction
anymore this interaction now becomes a
global interaction and not just a
static interaction so it's based on just
this element
all right so let's go ahead and add the
animation we have to name this animation
so let's call this animation
nav bar and opens
i like to make our my names have also
the name of whatever the content i'm
selecting
and then the action so in this case is
open because
i might have later another name for it
to close that navbar
so just now keep that name simple first
i need to select
what element on the screen do i want to
add
an action to so what i do is i select
the burger loti
in this case i already have a class and
now that i've selected the burger lottie
i can add an
animation to that particular element so
we click on the plus
and what i want to do is select the loti
integration
right here you're going to see a couple
of settings here this is
our animation playground okay so our
animation playground
consists of these sections first the
timeline
or kind of like where the sequence is
going to happen
some of the timing settings and then
some additional settings
so let's focus just on this section
right here
the first thing i want to do is that on
zero
so the timeline at zero seconds i want
the burger
loti to have a default state
so in order for me to have that default
state i need to toggle
this little tiny thing called set
initial state
so once i've toggled that i know that
this is always going to be
our default state for that particular
element
and i want that to be on frame you can
browse and drag these to see all the
different frames that make
up that animation i want to make sure
that that
burger menu icon is always shown even if
the menu icon is closed
but because we're creating an animation
when the navbar gets clicked on
then the ending of that same element
i want that to be a different frame
so all i have to do is select the next
one add
a new node or a new key keyframe
and this keyframe is gonna have an
iteration
but the most importantly the frame where
you want it to
end so if i go all the way to 100
it goes back to that burger we actually
don't want that we want it to go
and sit right about the middle which is
50 percent
and that's where our close icon appears
that's what i want to happen if you play
this the animation
is playing up to 50 of that keyframe
animation of the lottie animation which
is exactly what we want
all right so we started our first frame
we set it as a
initial state we made sure that it's at
zero
it's on the keyframe zero and on the
second one
on the second keyframe we have change
that to fifty percent
we can smooth that out by selecting the
type of animation
based on the interpolation let's click
done
and let's preview our demo right now
this preview is only showing you what
happens with this animation
but we need to actually go into preview
to see how that works
notice what i'm doing i'm going to hover
click on it and boom
just by clicking on it i have that
animation set
and now i want to do the same thing
reverse so when i click
out when i'm out or i close that menu i
want this to go back to zero
now look at the second action that i get
so on the prop on the interactions panel
we're going to select a custom animation
and
we're going to see all of our all of the
animations that we start creating
are going to appear always right below
what i can do
is create a new animation so i'm going
to call this navbar
i'm going to select the the burger
lottie then select the integration
lottie
so because uh we know that the animation
is already at 50 percent
all we have to tell this animation is
not even think about
additional keyframes because the this
very first keyframe
is an animation on its own so it's just
we can set like how long you want it to
to last
and for example i want this animation to
be at
zero percent because i want it to go
back to the burger menu
we can't toggle this preview because
there's really no previous keyframe
but if i were to just click done if i go
into preview mode
then click on that loti animation starts
that's at 50
then when i click close it's gonna go
back to that zero percent
and i can change some of the values here
of the close animation
to be a little slower so let's say the
duration is
two seconds i can preview that again
and notice what's going to happen that
close is going to take two seconds to
happen
so as you can see it can get a little
bit confusing but when
you get the hang of this interaction and
how it works based on
action so action one action two
and action two typically it's always
gonna it's gonna end up
on whatever the previous action had
cool alright guys so let's go ahead and
jump into our next lesson so we can
learn about
interactions with our navigation
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS