On this Webflow lesson we take a look at viewport animations on the x-axis. How to add animations based on your mouse movement in Webflow and how to apply element 3D transforms while moving your mouse 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!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS