Webflow Scroll Animations

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