How to Add Animation On Scroll in Elementor (Like Apple AirPods)

  Introduction
In this article, you'll learn how to add animation on scroll in Elementor to create engaging, cinematic scroll sequences like those used by Apple on the AirPods landing page. All you need is Elementor and the freemium Scrollsequence plugin.
WP Mayor’s work is supported by its audience. If you purchase through a link on our website, we may earn a commission. Here’s why you can trust us.
Table of contents

This article is for you if you’re looking for a way to add a scroll effect or animation in Elementor like Apple and Sony use on their websites.

While Elementor Pro includes all kinds of neat animation effects via its Motion Effects feature, it doesn’t let you create a really engaging image sequence on scroll effects like the ones you see on Apple’s website (plus plenty of others). For example, the AirPods Pro page.

With the Scrollsequence plugin, you can easily add these types of cinematic scroll animations to Elementor (including the free version of Elementor).

It’s hard to describe in words, so check out the example below (the animation moves as a visitor scrolls down the page):

If you want to learn more about Scrollsequence in general, you can read our full Scrollsequence review

In this post, though, we’re specifically going to focus on how to add animation on scroll in Elementor using Scrollsequence.

Let’s dig in!

How to Create Cinematic Scroll Animations in Elementor With Scrollsequence

Here’s a high-level look at the steps involved – keep reading for the detailed tutorial:

  1. Install the Scrollsequence plugin
  2. Create your animation
  3. Add the scroll animation to Elementor

1. Install the Scrollsequence Plugin

To begin, you’ll want to install the Scrollsequence plugin on your Elementor website.

Scrollsequence has a free version at WordPress.org as well as a premium version that adds more features. The free version lets you set up basic animations with up to three scenes and a maximum of 100 images per scene, while the premium version removes all limits and also adds more advanced animations and features.

You can also try all of the premium features for free with a 14-day free trial, so you don’t need to pay anything just to test it out.

If you do decide you want the premium version after the trial, it starts at $69.99. However, you can use our excusive Scrollsequence coupon to save 20%:

20% OFF
Scrollsequence
Scrollsequence
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes.
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes. Show Less

2. Create Your Animation

Once you’ve installed the plugin, head to Scrollsequence → Add New Scrollsequence to set up your first scroll animation.

Each animation consists of one or more scenes and each scene will contain multiple images arranged in a sequence. The plugin will then generate the animation based on all of the images in the sequence.

A “scene” is one complete animation sequence. If you decide to add multiple scenes, the user will advance to the next scene once they’ve completely scrolled through the first scene’s animation.

In most situations, you’ll want to base the images in your sequence on a base video. To convert an existing video to a sequence of separate images, you can use one of these tools from the plugin’s documentation. The simplest option is the browser-based Ezgif converter, but you’ll get better quality with dedicated software.

Create a new animation

Create Scenes and Add Images

Once you’ve created your high-level animation, click the Add Scene button to add your first scene.

This will expand a new set of options that let you upload all of the images for your animation sequence. The developers recommend uploading at least 50-100 images per scene to ensure a smooth animation.

Once you upload the images, you can use the sort option to make sure that they’re in the proper order. If they’re not in the right order, your animation won’t look right.

Add images to the scene to create animation on scroll in Elementor

If you want to create another scene, you can do so by clicking the plus icon next to the Scene 0 tab.

Add Fixed Content and Animations

To add the fixed content that appears on top of the animation images, you can use the Fixed Content box for the content itself.

Then, you can use the Fixed Content Animation section to set up its animation rules. We cover this in detail in Step #4 of our Scrollsequence review, but the basic idea is as follows:

  1. You add CSS selectors to the content in the Fixed Content box (using the Text tab).
  2. You set up your animation rules in the Fixed Content Animation box by targeting those CSS selectors and then also choosing the timing for how to animate content within those selectors. For example, you could say that you want to show certain text for images 30-55.

Here’s an example of adding the CSS selectors to your content:

Add content with CSS

And then here’s what it looks like to set up the animation rules:

Animate content as needed

In addition to animating your fixed content, you can also adjust the image duration.

Configure Other Settings As Needed

Setting up your scenes, images, and fixed content are the most important parts of creating an animation.

However, Scrollsequence also gives you some other settings in this interface that you might want to explore.

For example, you can adjust the image scale and alignment at the bottom of the scene settings area.

You also get some general settings in the Scrollsequence Settings area of the sidebar. In this widget, you can control the image width and scroll delay, as well as add custom CSS if desired.

Configure other animation settings

Publish Your Animation

To finish things out, click the Publish button to publish your animation, just like you would a blog post.

Once you publish it, you can find this animation’s shortcode by going to Scrollsequence → Scrollsequence:

Animation shortcode

Keep this shortcode handy because you’ll need it in a second to add animation on scroll in Elementor.

3. Add Your Scroll Animation to Elementor

Once you’re happy with your scroll animation, you’re ready to add it to your Elementor design.

You could create a separate Elementor design exclusively for the scroll animation. Or, you could also include the scroll animation as part of a larger design. In this case, content above and below the scroll animation would remain static.

To get started, launch the Elementor editor for the piece of content where you want to add your scroll animation.

Then, here’s how to add the scroll animation:

  1. Add Elementor’s Shortcode widget where you want the scroll animation to appear.
  2. Paste in the animation’s shortcode (again, you can find this by going to Scrollsequence → Scrollsequence).
  3. Click the Apply button in the Shortcode widget’s settings to have Elementor generate a live preview of your animation in the editor.
Add animation shortcode to the Elementor editor.

You can experience your full animation without leaving the Elementor editor – just scroll down in the visual preview!

And that’s it – you just learned how to set up a cinematic scroll animation in Elementor, just like Apple does with so many of its landing pages.

If you want to create additional animations or add new scenes to your animation, you just need to repeat the steps from above.

Create Your First Elementor On Scroll Animation Today

People love Elementor because of how much flexibility it gives you when it comes to creating your design.

However, one thing Elementor can’t do by itself is set up the types of cinematic on-scroll animations that you see from Apple and others.

By pairing Elementor with Scrollsequence, you can easily add these types of animations to your Elementor designs.

If you want to try it out, you have two options:

  1. Just use the free version of Scrollsequence at WordPress.org.
  2. Use the 14-day free trial to access all of the premium features in Scrollsequence.

If you decide that you want to use the premium version of Scrollsequence, you can use our exclusive Scrollsequence coupon to save 20% on your order.

20% OFF
Scrollsequence
Scrollsequence
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes.
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes. Show Less

Do you still have any questions about how to add animation on scroll in Elementor? Give us a shout in the comments section and let us know what’s on your mind.

Next step 

Colin Newcomer
Colin Newcomer
Colin has been using WordPress for over a decade and is on a quest to test all 60,000+ plugins at WordPress.org. He has been a Writer and Product Review Expert for WP Mayor since 2017, testing well over 150 products and services throughout that time.
Colin Newcomer
Colin Newcomer
Colin has been using WordPress for over a decade and is on a quest to test all 60,000+ plugins at WordPress.org. He has been a Writer and Product Review Expert for WP Mayor since 2017, testing well over 150 products and services throughout that time.
PeachPay for WooCommece

An all-in-one checkout and payment solution for WooCommerce . See your store's sales increase by 35%!

4 Months FREE with WP Engine

4 months free on all shared managed WordPress and eCommerce hosting plans. Offer ends on 12/01/2022.

Expand your toolset with expertly verified solutions delivered to your inbox every week.
Join thousands of designers, developers, and marketers who trust our experts to find and test the best tools for their WordPress sites.
By signing up to our newsletter, you agree to receive electronic communications from WP Mayor that may include advertisements.
Expand your toolset with expertly verified solutions delivered to your inbox every week.
Join thousands of designers, developers, and marketers who trust our experts to find and test the best tools for their WordPress sites.
By signing up to our newsletter, you agree to receive electronic communications from WP Mayor that may include advertisements.

Leave a Reply

Your email address will not be published. Required fields are marked *

From web hosting to WooCommerce plugins and backup services, we have put together a collection of exclusive coupons and deals just for you.
WP Mayor_Icon_white
2022 Reader Survey