Webflow Parallax Animations

now let's go ahead and take a look

quickly

at the parallax interaction

for this interaction we're going to use

the same while scrolling view

but we're going to use the section of

the parallax that we have already

created

and what i'm going to do here is just

start moving some of the elements around

on the y-axis as you can see i'm testing

as i go

on the live preview and the idea here is

that i'm trying to figure out at what

point i want

when i as i scroll down the page where

do i want this

vr headset to be at a starting point and

where it's going to end

so the 3d cube and the curl on the side

will need to interact in the opposite

direction

so that we create this parallax effect

[Music]

playing now within the 50 of the

timeline so the 50

between these two sections i am changing

the values

on the 3d cube and also i am trying to

make the

rotation all i do is i add a little bit

of rotation

into the properties so that it almost

feels like all the other

elements are not just moving but they

are also rotating

and just that alone adds that extra

layer

of interaction

so look how nice it is it's starting to

look really cool as we can see the label

uh sitting behind the vr headset so

we're gonna

replicate the same idea with the curl

and again you want to start exploring

based on

the y-axis where you want it to start

how

it should start rotating

one thing that i like doing is adding

also a c index

so that these curl elements are starting

to sit on

on top so above the vr headset

and also you can play along with the

y-axis using percentage values

so you don't have to stick with the

limiting pixel values that you get

by default you can change those values

to a negative or positive percentages

so that it creates that illusion based

on the size

of the container it just helps a little

bit if you think that the parallax is

not

doing very well finally here what i'm

going to do is this

apply the same while scrolling to view

but for the footer or the section of the

signup

i've created this interaction so that as

soon as you start scrolling

these elements that are the same cube

and the same curl

are going to start moving into its

position

but the way we're going to do it is

adding rotation

so you can add blur effects to create

perspective that depth

between almost like the camera lens

right

as soon as you scroll into view that

blur effect goes away

so what i'm doing here now is that i've

realized that

putting all those end spots or keyframes

at the very end of 100

does not work because the size of this

section does not let me go

past it so the actual place we want to

add that final stage

is 50 so as you can see here i've added

that

those keyframes to fifty percent so it

reaches exactly where i want it to

alright guys let's go ahead and take a

look at the loading on the next lesson

i'll see you there

‍