Webflow Navbar Animations

great so let's continue with the

navigation bar

let me open up the nav bar open up here

and because we've already created a

trigger

on the nav bar we can utilize that same

trigger

to start adding some animation to these

elements

i open that up and now i can simply

hover over this little tiny keyframe on

the left

to find the plus to add more elements

so if i select for example this first

one

the navbar home and then click here on

the plus icon

i can start changing some of the

properties i can change the move

i can scale it i can rotate it all these

additional settings that we can play

with

for now let's just play with the move

and the first

thing i want to do is select that

initial state

that initial state for this particular

element on the x-axis

50 pixels to the left but because i'm

selecting

it's it's affecting the class it's going

to affect all the elements that have the

same class

navbar link now you might want to do

that but

in this particular instance i'm going to

select selected element only

so i only want to affect this element

so i can add another keyframe by

selecting move again

and i can bring back the move settings

to zero

to reset whatever that previous

setting that we had created so it was

minus 57 maybe we'll

change that to 60. and on the second

keyframe right here we want that to be

at zero

notice that this initial state is no

longer activated because that's already

been done in the first frame

right now it's showing that it's act

it's gonna do this

in 500 milliseconds after

the previous action so after this action

occurs

so if i were to play this

that animation is not going to begin

after

that burger loti gets to that to that

close

so it's it's all about having to figure

out

the timing between one keyframe and the

other

so ideally what you could do is just

move this element

or this keyframe and just drop it in to

the same

keyframe where that burger loti ends

and now notice that they're together

that what this means is that it's going

to start

the animation it's going to begin with

the previous action

so along with the previous action it's

going to also animate

so now both of these animations are

happening at the same time

let's go ahead and do the same thing for

the other elements

okay so as i play this animation you can

see right away

that all the elements are animating at

the same time

but that's not what i want i want to

have some kind of space between

each animation first line comes in then

it goes to the second

then the third then the fourth in order

to do that we need to create some

delay so if we select each one of these

elements

we can see which element we're selecting

and we can add a simple delay

by adding either a millisecond or by

moving them

outside of the actual timeline so let's

take a look

so if i added features to have a delay

with the previous action i can do that

using 0.1

milliseconds or 100 milliseconds

so if i click enter

i know that this next animation is going

to happen

100 milliseconds after

the first one and you can see that also

being applied here

by the one the the point one which is a

hundred milliseconds

let's do that same thing with every

other element let's add a point two

and let's add on this last one 8.3

all these elements are going to be

animated in a sequence

of okay the first thing is the burger

loti

then i want this home icon then i want

this one to come in

then this one and then finally this one

just by adding a simple

delay based on seconds boom so we just

created that simple animation

all right because we want this animation

to begin

slightly right after this ends we want

to have

a small space between we when we see the

animation of the

loti animation and then the menu kind of

comes in

to do that we just need to start moving

these around select them all

and just simply change after the

previous action

so just like that we're gonna have

something like this

because right now it's doing that one

right after the other one

but in fact we want all these to happen

at the same time

one right after the other so we just

need to put these back inside

so these are happening with the previous

action and not after the previous action

okay all right so we have that

okay that looks good and this needs to

have some delay

because now they all have the same exact

delay

we see the burger menu come in and then

we have them all come in at the same

time

we could change all of them by selecting

them all and just

changing this to 0.1

and then we can go back to the first one

this one comes in first so there's no

delay here

we don't need a delay there

so let's try that all right that looks a

little bit better

great now we want to have a fade over

to that uh this whole section i want it

to fade in

first and we can do that by selecting

the flex

uh the actual navbar menu and we can add

it over here

by adding the property of opacity

so the opacity in this particular class

is going to be at zero

and i want it to have a hundred percent

at the same time that the burger lottie

animation ends

so i add that here and add a

100 and just like that

we'll see that animation come in first

so that's

being animated and then the menu items

start

now this all is happening very slowly

because it's using the duration of 500

milliseconds

so what i'm going to do is i'm going to

start changing some of these

values of the duration to be at 200

just to make this a little bit faster on

every single element

great

we can also add some opacity to each one

of these so

right now i can't see them because of

course the the nav

the nav bar menu has has the opacity at

zero percent but if i

kind of make this back again to 100

i can select this and add another

another property which is going to be in

this case

opacity so i'm selecting this one i'm

adding a new property called opacity

and i'm going to make this opacity zero

and over here where we have that same

element

we want this to have opacity 100

just like that make sure that you change

the duration to 2

and we repeat the process

all right let's let's make sure we

default we take the

the actual menu bar make sure that this

menu bar is at zero as well

because this is the first thing we want

to animate and

voila we just created an interactive

animation

using javascript with the help of

webflows interaction tool

pretty cool now we can start looking at

viewport animations

i'll see you on the next lesson

‍