KreativePro Masterclass
Hello, {first_name}
Navbar Animations
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Webflow Navbar Animations

On this Webflow lesson we take a look at Navbar triggered animations. How to make custom animations when you open the navbar in Webflow and how to setup timed actions correctly using Webflow.

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

📥 Download Template

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Webflow Project Files


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
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.
Noel Hale
Founder of Slush Monkeys®
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!
Mae Green
Product Designer @ Dropbox

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


on the nav bar we can utilize that same


to start adding some animation to these


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


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


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


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


so if i were to play this

that animation is not going to begin


that burger loti gets to that to that


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


the timing between one keyframe and the


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


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


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


we see the burger menu come in and then

we have them all come in at the same


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


now this all is happening very slowly

because it's using the duration of 500


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


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


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


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

Coming Soon

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...