On this Webflow lesson we take a look at scroll animations. How to add animations while scrolling in view using Webflow and when to use scroll into view vs scrolling in view in 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!
all right cool guys hopefully by now
you have a better idea of how these
interactions are going to work what i
want to do is that as you scroll down
into this
and you see this view or in other words
the products
i want these two headsets to come in
from the sides
right so slightly go in from the sides
and as you scroll down
they start to go away so the simple way
to do this
is by selecting the actual section so
the section itself the entire section
class is going to be our trigger right
and
what i want to do is actually when i'm
scrolling through this viewport or this
section
i want to do something and the element
trigger gives us a couple of options
so it gives us the option that it says
as soon as you scroll into that view
or while scrolling in that view so
during that time that i'm scrolling
through it
i want you to do some animation so this
is exactly the one we want
while scrolling in view we're going to
add a play scroll animation
and we get some properties here some
boundaries from 0
to 100 we get some animations that we
need to create
and some smoothing let's toggle this off
because we don't want to have this
animation on
mobile breakpoints and let's add that
animation
so i'm going to select the element that
i want so in this case the vr headset
class and i'm going to have this
move property and
what i wanted to do is i wanted to start
off the starting point of that
element is going to be at negative so
it's hidden
away from the viewport around there that
looks good
and then as i start scrolling down so
let's toggle the live preview on
so you can see what i'm doing so notice
how this little green
label with the percentage starts to show
so
right away it's giving us the pointer
that zero percent is where that section
starts and as you start scrolling down
we get to the fifty percent of that view
so right about there
we're at 50 and we can
see now going back out to 100 it takes
you
outside of that view
what i want is that on 50 this same
headset i'm going to add
the property move i want it to come back
to its
position one all right and so what's
happening is
as soon as i started adding this move uh
property
it's resetting my rotation that i have
established on the class
and this is happening because the
interaction is trying to manipulate this
element but because you've already
established a style it's going to
override it with whatever you have here
on the properties
so how can we fix this let's just
preview this just to see if it's to see
the scroll of the animation
okay so we know the animation is working
as we can see here as you scroll
out of view and interview that's exactly
what we want
and if we add that same uh interaction
over
to the last one you can see that if i
preview this the animation is working so
you go in the middle
we see it you go out it's gone that's
what we want to do
but the rotation issue is something we
can fix like this
okay so let's wrap this inside another
div block
and we're going to keep the same
settings we have here we're just going
to drop that in here
and we're going to call this the side
headset
and we're not going to change any
settings because all we want to do is
have
this act like a little hack for our
animations in the interactions panel
okay
so if we have side headset and we have
our headset
so we go back into our interaction we
select the
section and while scrolling in view
we click on the animation we want to
change this to
vr side headsets
what we want to do is replace this so we
want to do is change the target by
clicking but by right-clicking
these keyframes we can change the target
we select the change target and then
over here we select side headset
right like that and that little yellow
icon is going to appear because we need
to apply it across
all of the keyframes that we have
created
okay change target you can select
manually on the canvas but it's easier
to just use the navigator
because you can visually see where that
element is
all right so now that we've changed the
target you can see now if we preview
this
we have exactly what we wanted so we
have a rotation
on that element nicely in place
we need to make sure that the side
headset has a position absolute
and it's with 100 by 100 height
so that it matches the same area of the
section
so our parent container so let's quickly
do that
going to add 100
by 100 percent and i'm gonna position
this
absolute and just toggle on the top left
corner
so that looks good and right away we see
that these elements the headsets are
aligning
relative to the side headset so this is
just a quick
simple hack for us to start making this
interaction work the way we've set it up
we can see that the side headset
is following us along nicely
so where we actually want this to be
happening
now what i'd like to do is not have this
jarring kind of
change or jump between when you get to
the middle and it just starts to go away
right away
what i like to do is have it a little
bit smoother we want to be able to
change the keyframe of
where that center point is to about 30
percent
and then from that point we want to keep
it
we add another one so move and the side
headset we want it to be
so we have this one being negative 14
which we can bring over to one
like that this one is minus 500
then it gets to 30 it's at one and then
here it's at one
stays within that area and then it goes
away
so let's toggle that preview and see the
difference
so as i scroll into 30 percent i see the
element coming in
it stays it stays it stays and then
it goes away after 60 which is great
that's what i wanted but we could even
add that
extra smoothness to it by simply making
the 60
come closer to the center by maybe 30.
so from
here to here it's 30 and it it's gonna
look like this so as you scroll down
we see it moving and it's still moving
very very slowly
to reach that 60 percent and then it
goes away
pretty cool right i'm going to just
bring
these animations over a little bit
down so that we don't use that bounce
instead we're going to use the ease in
out like that keep this one at easing
out as well
and then this one we just have an easing
out
uh what is it easy now bounce
back so like that
yeah so it comes in fast and slow and
then it goes away
fast that's exactly what i wanted to do
so let's duplicate that same effect over
with the right end
cool alright guys this is how we
get this interaction happening with the
cool while scrolling in view and i'll
see you on the next lesson so we can
take a look at
how we can get this same idea of
animations
for our parallax effects
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS