How To Use Motion Effects To Animate Images

Following the huge positive response we received after our Motion Effects tutorials, we decided to gather them into one article that will help you make more interactive websites very easily.

We will cover:

Rotate, horizontal & scale effects
Image transparency effect
Rotate and scale images
BONUS TRICK: Animated text overlap effect

So let’s get going…

Image Animation: Rotate, Horizontal Scroll, Vertical Scroll& Scale

In this video, you’ll learn how to add scrolling effects to your Elementor designs that make images look as if they’re swinging, sliding, floating, or advancing as a visitor scrolls down the page.

1. Image Rotate: Making Images Swing

To make an image swing, click on the Advanced Tab, open the Motion Effects section, and turn on Scrolling Effects.

Then, click on the Rotate option and choose which direction to rotate your image.

To make the animation smooth, also set the Speed slider to 1.

Finally, you can leave the Viewport set to the defaults – 0% and 100%:

Finally, set the Y Anchor Point to Top to make your image “swing” from the top.

2. Image Horizontal Scroll: How to Make Images Slide

To make an image slide, turn on Scrolling Effects like you did in the previous section. Then, turn on Horizontal Scroll and:

Choose the direction you want your image to slide
Set the Speed to 10

And that’s it! Your image will slide as a visitor scrolls down the page.

3. Image Vertical Scroll: How to Make Images Float

To make an image float, turn on Scrolling Effects. Then, enable the Vertical Scroll and set the direction equal to Down

And that’s it! You can leave the other settings as the defaults.

4. Image Scale: How to Create an Image Zoom

With this last one, it will look as if the image is moving towards the visitor as the visitor scrolls down. Another way to think of this is as the image “sinking”.

To get started, turn on Scrolling Effects. Then, enable VerticalScroll and:

Set the direction to Down
Set the Viewport between 0% and 40%

Then, click the Scale option and set the Speed equal to 6. Also, use the Viewport setting to make the bottom 20% and the top 80%.

And that’s it.

Now that you know how to use scrolling effects, experiment with your own designs to create something awesome!

Image Transparency: Make Images and Backgrounds Disappear on Scroll

In this video, you’ll learn how to use the Viewport settings to create cool motion effects as visitors navigate your site. You can apply motion effects to both backgrounds and sections, as well as individual widgets, which gives you a lot of flexibility for the types of effects that you create. To get started:

Select an image
Go to the Advanced tab
Find the Motion Effects section
Turn on Scrolling Effects

Then, enable the Horizontal Scroll to make your image move from left to right as users scroll down the page. You can also adjust the Speed setting to make the movement happen faster or slower:

Next, let’s dig into the Viewport option and see how it works.

First, it’s important to define the term – a visitor’s viewport is the visible size of a user’s device screen.

The Viewport options let you choose when to begin and stop your chosen scrolling effect based on a visitor’s viewport:

For example, if you set the bottom of the viewport to 0% and the top to 100%, the image will start moving as soon as it becomes visible at the bottom of a visitor’s viewport. What’s more, the image will reach its “original” position when it’s in the middle of the visitor’s viewport (or, 50%), and it will keep moving until it reaches the top (100%).

So here’s the whole effect in detail:

The image will start to the left of the original position when it first appears in a visitor’s viewport (visitor’s viewport at 0%)
It will reach its original position at the middle of a visitor’s viewport (visitor’s viewport at 50%)
It will continue sliding to the right of its original position as the visitor keeps scrolling (until it reaches 100%)

On the other hand, if you set the Bottom of the Viewport to 50% and the Top to 100%:

The image will start at its original position.
Once the image is in the middle of the visitor’s viewport (50%), it will start moving to the right until the image reaches the top of a visitor’s viewport (100%).

Let’s look at another type of scroll effect to drive home how the Viewport works…

Transparency Effect Example

For this example, turn on the Transparency option and:

Set the direction to Fade In
Set the Level to 10 (this makes the image very transparent to start)

If you set the Bottom viewport to 0% and the Top to 100%, the image will be transparent when it first appears at the bottom of a visitor’s viewport (0%). As the image moves up, it will become less transparent, eventually reaching its original appearance when it reaches the top of a visitor’s viewport (100%). If you wanted to reverse that, you could choose Fade Out. Then, the image will appear normal at first and increase in transparency as a visitor scrolls down. Finally, another option is Fade Out In. With this one, the image will fade out to start and then back in again as the visitor keeps scrolling. If you set the Bottom viewport to 40% and the Top to 60% with Fade Out In, then:

The image will fade out from 0% to 40%
It will stay faded out between 40% to 60%
Once it reaches 60%, it will start to fade in again between 60% and 100%

Now that you know how the Viewport setting works, you can play around with different settings to find the effect that you like.

Use X and Y Anchor Points In the Rotate & Scale Effects

In this video, you’ll learn about the X and Y anchor points for the Rotate and Scale effects in Elementor’s Motion Effects.

By the end, you’ll know how to apply these settings to create some cool motion effects at your site.

To get started, select the image that you want to add effects to and:

Go to the Advanced tab
Find the Motion Effects settings
Turn on Scrolling Effects

Anchor Points in the Rotate Effect

Let’s start with the Rotate effect. Click on the pencil icon by the Rotate effect to turn it on – you can leave the settings as the defaults. Then, look for the X Anchor Point and Y Anchor Point settings that appear below. The X and Y anchor points determine the axis around which an image rotates. By default, both are set to Center, which means that the image will rotate as if there is a “pin” in the center of the image. However, changing the X and/or Y anchor point will cause different rotation effects. For example, if you set the X Anchor Point to the left and the Y Anchor Point to the top, the image will rotate around the top-left corner like this:

Or, if you set the X AnchorPoint to the center, and the Y Anchor point to the top, the image will rotate as if it were a painting that you hung at the top. Get the idea? Let’s look at one more. If you change the X Anchor Point to the right, now the image will start spinning as if it were pinned in the top-right corner. Let’s sum this up. The X Anchor Point determines the position on the x-axis around which the image rotates:

And the Y Anchor Point does the same thing for the vertical orientation:

Anchor Points in the Scale Effect

Now that you understand the basic concept, let’s look at how this same idea works with the Scale effect.

To get started, disable the Rotate effect, turn on the Scale effect, and:

Set the Direction to Scale Up
Set the Speed to -5

By default, both the X Anchor Point and Y Anchor Point are set to Center, which means that the image scales down toward the center of the image widget.

On the other hand, if you set the anchor points to Left and Top, the image would scale down toward the top-left corner.

It’s the exact same idea as the rotate effect.

Now that you know how X and Y anchor points work, go ahead and play with these settings to create the exact effect that you want.

BONUS TRICK: Animated Text Overlap Effect

In this video, you’ll learn how to use the Horizontal Scroll feature in Elementor’s Motion Effects to create a neat animated text effect on your site.

You’ll be able to have text move across the page as visitors scroll. And with some tweaks, you can even make the text change color as it moves.

For this example, we’ll cover how to create multiple animated headings:

A simple grey heading that moves to the right and stays the same color
A white and pink heading that moves to the left and changes from white to pink once it crosses the pink background

Creating the First Header - Just Motion

Let’s start with the solid grey heading.

Select the heading, then:

Go to the Advanced tab
Find the Motion Effects section
Turn on Scrolling Effects

Then, click the pencil next to the Horizontal Scroll effect to enter its settings:

Change the Direction to the direction you want your text to scroll (“To Right” for our example)
Leave the Speed and Viewport settings as the defaults

And that’s it! Your heading will slide to the right as a visitor scrolls down the page.

Creating the Second Header - Motion and Color Change

Now, let’s get a little bit more advanced and have the heading change color as it moves. This process involves:

Creating duplicate inner sections
Using the Overflow: Hidden option to hide the heading from one of the sections once it passes outside the inner section

To get started, add a new Inner Section widget to the section where you want to place your header and then delete the left column. Then, set the Min Height equal to 450 px:

Then, go to the Style tab and set the background color to pink. Finally, go to the Advanced tab and set the left padding to 33%. Next, add the Heading widget and style it to your liking. You should have the heading inside the inner section like this:

Now, edit the Heading widget and turn on Scrolling Effects in the Advanced tab. Then, enable the Horizontal Scroll setting and leave the options as the defaults.

Now, your header will move to the left, but it won’t change colors yet. You can see that it’s still white even on the white background.

Let’s fix that…

Next, duplicate the inner section. Now, you’ll have two identical inner sections and headings. You can use the Navigator to rename the sections to help you remember which is which:

Now, go to the bottom inner section (the duplicate one) and change its background color to white. You’ll also want to change the heading color to the same color as the background in your original inner section. Then, add a negative top margin of 450 px to the bottom inner section. Now, the bottom (duplicate) inner section should appear “on top” of the original inner section. To fix this, set the Z-Index for the duplicate section to 1 and set the Z-Index for the original section to 2. Next, you need to make sure that only the pink header shows when it moves outside the inner section’s width. You can see an example of what we want below:

To achieve this effect, go to the settings for the original inner section. In the Layout tab, find the Overflow option and set it to Hidden.

And that’s it! Now, only the heading from the duplicate section will appear once it scrolls past the inner section, which creates the neat color-changing text effect.

We hope you found this roundup helpful!

Recently, someone from the Elementor community posed a question about utilising Motion Effects in their website. I hope this roundup guide helps you and encourages you to use Motion Effects in your next project.

If you still have any questions about creating animations and interactions using Elementor, please let us know in the comments below.

How to Use Motion Effects to Animate Images (Rotate, Scale, Scroll & Transparency)