On this Webflow lesson we take a look at parallax animations. How to create an advanced parallax animation in Webflow and how to use while scroll in view 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!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS