KreativePro Masterclass
Hello, {first_name}
5.8
Parallax Animations
Learn to build websites without code in Webflow
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
56
lessons
7
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Webflow Parallax Animations

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.

‍

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

đź“Ą Download Template

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Download
Download
Webflow Project Files

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
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.
Noel Hale
Founder of Slush Monkeys®
Mae
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!
Mae Green
Product Designer @ Dropbox

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

The future of the web without code
56
lessons
7
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
NEXT COURSE IN
00
Days
00
hrs
00
mins
00
secs
🚀