In this tutorial, we’ll go over how to use the X and Y anchor points with rotation and scale settings when adding motion effects to your WordPress website using Elementor.
You’ll learn how to:
✔︎ Add rotation & scale animations to your website
✔︎ Change your anchor points position
✔︎ And much more!
hi-oh zip from elements or here today
we’ll take a closer look at the X&Y
Anchor Point settings for the rotate and
scale effects 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 so
let’s dive in and see how it works the
X&Y anchor points can be used with the
rotate and scale effects I’ll be using
this product image to show you how it
works go to advanced and under motion
effects switch scrolling effects to on
I’ll start with rotate press the pencil
to enter its settings I’ll leave it as
is and focus on the X&Y
Anchor Point settings that now appear
below after having pressed the pencil
the X&Y anchor points are both set to
center let’s check it out as you can see
the image rotates to the left as if
there is a pin in the center of the
image widget the X&Y anchor points
determine the axis around which the
element rotates I’ll go ahead and set
the X anchor point to left and Y to top
when I scroll now the axis around which
the image rotates is the top-left corner
of the image widget now I wanted to
wrote it at the top of the image widget
around the center just like a painting
hanging on a nail so I’ll leave the Y
anchor point at the top and set the X to
the center starting to get the hang of
it cool let’s change the X anchor point
to right as you can see the X anchor
point determines the horizontal
orientation of the axis around which the
image rotates and the Y anchor points
sets the vertical orientation okay great
now that we understand the concept let’s
see how it works on the scale effect
I’ll go ahead and hit the reset button
now let’s go to scale press the pencil
to enter its settings I’ll set the
direction to scale up and the speed to
negative 5
this way we can still see the image
widget signs so it’s easier to follow
I’ll leave the viewport settings as is
you can check out a video explaining
this concept in a
in the description below okay great so
let’s check out the X&Y Anchor Point
settings they’re both set to center the
image scales down towards the center of
the image widget I’ll change the X
anchor point to left and Y to top now
the image scales down towards the top
left corner of the image widget if I
wanted to scale down towards the center
of the image widgets right side I’ll set
the X anchor point to right and Y to
Center just like we saw with the rotate
effect the X anchor point determines the
horizontal orientation of the axis
towards which the image scales down and
the y anchor point sets the vertical
orientation the same applies for all the
scale directions so go ahead and try
them out and get the exact motion effect
you’re looking for well that’s it now
you know how the X&Y and Capone settings
for the rotate and scale effects work
and can use them to make your designs
really stand out don’t forget to
subscribe to our YouTube channel for
more tips and tutorials see you later
alligator
