Webflow Lottie Animations

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

‍