Webflow Viewport X-Axis Interaction

all right guys the next interaction

we're going to take a look at

is the page trigger interaction

so what happens when your mouse moves

over a specific part of

the layout what can we do with that

right

in this case i want these hands to start

moving

closer to that get started button as i

move my mouse

over to the middle and this is actually

a simple interaction

but with the power wet flow we can make

this happen

in no time all right so let's take a

look at our both of our class names

we have two elements one with vr hand

yeah so we have the left hand

and we have the right hand and so let's

click

on the body in this case the cinema bg

and then click

on the interactions panel and instead of

element triggers we're going to focus

on page trigger the plus icon

click on mouse move in viewport so

whenever

we have an action based when the mouse

is moving

either on the x-axis or on the y-axis

so we want this to actually work only on

the desktop

and above i'm going to do is on mouse

move i want to do

have an animation so he's going to ask

us

what animation do you want to have this

is a different type of animation

it's not an element trigger animation

this is a mouse animation

and this is the resting state we'll look

at this in a little bit so first thing

is

let's add that animation i'm going to

call this vr hands

and this vr hands is going to take care

of both these hands

notice how i have two sections here the

mouse on x

axis on mouse on y-axis and this

timeline

does not work as key frames they work as

percentage

this percentage is based on a zero of

this

x-axis so zero is over here

and a hundred percent is right over here

so let's make an example i'm going to

select this element

and i'm going to add it into our

elements actions i'm going to add a new

action

and i want this element to move closer

to that get started button so i'm going

to click move

and immediately i get two uh two key

frames the one in the zero and the one

at hundred percent

this does not have any value to apply to

it that's why they

have this little yellow alert icon as

soon as i start adding values

then they will go away the first

thing i want to make sure i understand

is that the percentage so

50 just around here if i add a move

i know that i can i can start changing

some of the values of that element

based on the fact that 50 is half of the

screen

and so i want to go ahead and select 50

percent

and i want this hand to start moving

closer to where we want it right about

there

and then at the very beginning i want

this to go back to zero

so that's where the defaults state

and if it gets to a hundred percent so

this is fifty percent that's when the

mouse goes over to fifty

if we click on this live preview button

we can see how our mouse

starts to move across the fifty percent

timeline to reach what we're trying to

do after 50

i don't want it to go anywhere else i

just want it to stay exactly where it is

so that's pretty cool and then i want to

do the same thing with the left hand

so if we select the left hand we say

move this

from zero x to 50

and i want this to move this way

and reach right about there that's

perfect

and i can even just leave it like that

and start previewing it so right now

if i start going from 0 to 50

it's going to start working pretty well

i want this to work in a way that

actually when you get to 50

it gets there but then you start

scrolling out they also go back and

default

to their size so to their position so

let's bring this back to zero

and let's select this again and move

this one back to zero

now when i get my hand outside at

hundred percent

they both go back to their default state

when they go in the middle

they stay right where we need it and

then as i go out

that's exactly it that's what i want it

one cool feature

is that you can have all these other

properties applied to it

for example a simple rotation

or skew or scale could add just a little

bit more of perspective on this

animation

so let's go ahead and try it the first

action i want is to

add a rotation i get a couple of

options here for rotate zero degrees and

let me click on the 50 and at the rotate

again

and i'm gonna simply start rotating just

just a little bit

almost to create a very s subtle

effect as the hand is kind of like

moving in perspective right as it's

going further away

if i play around with the rotation from

the z index

i also can move the hand so we want this

hand to start at zero

and the rotation to be at

slight the sleeve is similar just around

there

i think that's pretty good 12. so let's

preview this

okay now we're playing with this right

axis so after 50 nothing's happening but

if i go back here

from zero to 50 you can see how the hand

starts to transform itself and

actually feels very very organic all

right so we want to bring that same

effect over here

and just like that we have this really

cool effect

happening right let's duplicate that

with the other hand

and there we go so we just have

that effect happening

preview and voila we've just added that

nice

interaction on our hands so that it

follows through

let's take a look at what these settings

are

the animation resting state is for

example if you were to

move outside of your mouse of your

browser

so if i scale this out how fast what

what would be this

resting state and how fast and smooth do

we want it to go back to that

resting state okay notice now that

they're like there's like a small

easing into that animation

so that they actually move a little bit

more human

very very smooth just by adding some of

these

settings here of 100 smoothness

all right guys let's jump to the next

lesson