In this tutorial, we’ll go over how to use the viewport settings when adding scrolling effects to your WordPress website using Elementor.
You’ll learn how to:
✔︎ Add scrolling effects to your website or landing page
✔︎ Use motion effect’s speed slider
✔︎ Set your animations according to the viewport
heyo zip from Elementor here today we’ll
take a closer look at the powerful
viewport settings for scrolling effect
I’ll show you exactly how they work and
give you some ideas on how to apply them
so you can create cool motion effects
like you see here let’s dive in and see
how it works it’s important to know that
motion effects can be applied to
background images in sections as well as
on individual elements like this custom
positioned image let’s use it to check
out how viewport settings work go to
advanced and under motion effects switch
scrolling effects to on I’ll start with
the horizontal scroll effect press the
pencil to enter its settings I’ll set
the direction to right because I want
the image to move to the right when
users scroll down the page the speed
slider allows us to control the speed at
which the image moves from left to right
I’ll set it to 5 as you can see it moved
a bit to the left I’ll show you why in a
bit now for the viewport settings they
allow us to determine when to begin the
movement based on the viewport height
which is the visible size of the device
screen 0% is the bottom of the viewport
meaning that if we set it to start at 0%
the motion effect will start the moment
the top of the image widget becomes
visible on the bottom of the viewport
the image will be at its original
position when the middle of the widgets
height reaches 50% of the viewport this
is also why the image started a bit on
the left outside the widget the motion
will stop when the bottom of the image
widget reaches the top of the viewport
cool now let’s set the viewport values
between 50 and 100 the image starts at
its original position let’s check it out
as you can see the movement only starts
after the middle of the widgets height
reaches half the viewport side it stops
when the bottom of the image widgets
reaches the top of the viewport cool now
let’s see how these settings work with
some other effects I’ll press the reset
button and check out the transparency
option we have for directions to
choose from I’ll start with fade in the
level slider ranges from 1 to 10 and
determines the amount of transparency
our image starts with setting it to 1
won’t add any transparency I’ll set it
to 10 so you can clearly see how it
works the viewport values are the same
as we saw before I’ll set the viewport
values between 0 and 100 let’s check it
out as you can see the transparency
effect starts the moment the top of the
image widget becomes visible on the
bottom of the viewport
it starts with very transparent because
I set it to 10 and it becomes less
transparent the closer it gets to the
top of the viewport the transparency
stops when the bottom of the image
widget reaches the top of the viewport
now it’s back to its normal self cool
now let’s check out the fade-out option
it does the exact opposite it starts
without any transparency and the more we
scroll the more it fades out now for
fade out in just like it sounds it will
make the image first fade out and then
fade in again I’ll go ahead and set the
viewport values between 40 and 60 let’s
check it out as you can see between zero
and 40% the image fades out and reaches
its max transparency in our case it’s 10
so it’s totally disappeared it will stay
this way between 40 and 60% and after 60
it starts fading in again and stops when
the bottom of the image widget reaches
the top of the viewport so it’s back to
its normal self again well that’s it now
you know how to use the powerful
viewport settings for scrolling effects
go ahead and play around with them so
you get the exact motion effect you’re
looking for it’s easy and really fun
don’t forget to subscribe to our YouTube
channel for more tips and tutorials see
you later
