In this tutorial, we’ll go over how to add scrolling effects and animations to your website.
You’ll learn:
✔︎ How to create scrolling effects
✔︎ Add horizontal scroll animations
✔︎ Use an element anchor point, and much more!
hi Elle Cassie from Elementor here today
we’ll learn how to add cool movement
effects using elementor’s motion effects
will make elements on the page swing
slide float and ride let’s do it
I already created a design with Sam our
model here doing some sports activities
let’s make him swing click on the image
and in the Advanced tab motion effects
scrolling effects flip the switch to on
and click on rotate in the direction
drop-down set it to right so the swing
will swing inwards to get a smooth
realistic animation set the speed slider
to 1 we’ll leave the viewport bottom and
top on its default values because we
want the animation to happen on 100% of
the screen bottom to top in the Y Anchor
Point
let’s choose top and there we go our Sam
is swinging next let’s mix am a skater
click the image in advanced motion
effects edit the horizontal scroll under
direction set it to right and in speed
set it to 10 now check it out can you
skate like Sam next let’s be more Zen
and make Sam float click the image and
again in advanced motion effects this
time choose vertical scroll in the
direction drop-down choose down and
that’s it
Sam floats all the way to our next and
final section here we’ll make Sam ride
his bike towards us click the image in
advanced motion effects choose vertical
scroll in the viewport set the animation
between zero and 40%
now click the scale and set the speed to
in the top to 80% that’s it we made our
friend Sam move all over the place and
by using exciting motion effects our
site is dynamic and full of cool
interactions don’t forget subscribe to
our YouTube channel for more videos and
exciting tutorials catch you later
