KreativePro Masterclass
Hello, {first_name}
5.7
Viewport Y-Axis Interaction
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 Viewport Y Axis Interaction

On this Webflow lesson we take a look at viewport y-axis interactions. How to create mouse move over element animations using Webflow and when to use Webflow's mouse Y actions.

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

okay so the first thing i'm doing here

is just adding some rotation

to the card itself and

adding the self perspective setting so

i'm going to repeat that process over

with this

other card and as you can see i'm just

playing around with the self

perspective to see what works

the second thing i'm adding here is just

the the play icon

that we have in our design from our

previous course

so this play icon is just centering it

position absolute we are going to be

using

margin offset to to make sure that it's

completely centered

[Music]

i'm just polishing up some of the

borders around this

card where the clip is so we're just

adding some box shadow

so it doesn't affect or push our

elements away

just adding some very slight and subtle

opacity into that border

and that looks a lot better

next i'm just quickly adding some of the

drop shadows

just to give that extra layer of depth

into each of these cards so there's a

shadow falling on top of the clip card

right behind

so right in the middle

we're going to select the sections so

the section is going to be

our point of reference for the mouse x

movement and the mouse y movement and

right away what i'm doing is i'm

selecting

the flex container which has actually

the features

combo class if you notice there i'm

actually

just playing around with the x-axis

first and rotation on the y-axis so i'm

putting up a little bit of the degrees

20 and 20 and look how nice this

rotation works

we're going to duplicate that same

effect but we're going to actually use

the x

axis now on the mouse y movement

and you can play along with this but

then what it's doing is actually making

it super

super interactive now it's both axes

so both on the y and the x axis

and finally what i want to do is how 3d

usually works is based on

light and reflection i wanted to add a

little circle

where as you move your mouse around that

could be

kind of like an illusion of a light or a

key light hitting down on these cards

and you can do this simply by adding

that circle adding some blur

making the background in white and

border radius we can add a very nice

effect

without having to export a png image

and notice what i'm doing here i'm

adding the same interaction i did

but now i'm doing the opposite so if i

move my mouse over to the left

the light moves to the right and it's

almost that nice effect

as if we were in a 3d space

we do the same thing on the y-axis and

there we go

we have this really cool effect almost

like a sphere as you move your mouse

around

and it looks pretty cool great guys i'll

see you in the next lesson

so we can take a look at the parallax

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
🚀