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.
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!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS