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

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

Searching for a way to add animation on scroll 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!

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% OFFScrollsequence

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

20i WordPress Hosting

Details

Exclusive 50% discount from 20i WordPress Hosting, just for WP Mayor readers.

Astra Pro Coupon Code

Astra

Details

Get an exclusive 10% Discount off Astra Pro, the Essential bundle, and the Growth bundle.

Astra Birthday Sale

Astra Birthday Sale

Details

25% discount on Astra Pro or Astra Agency bundles plus get a free entry into a prize draw to win a brand new iMac!

WooFunnels

Autonami

Details

Exclusive 10% Discount on Autonami – Manage customer relationships using tagging, segmentation, and broadcasts without leaving WordPress.

Avada

Avada

Details

Avada is the ultimate WordPress website builder. Trusted by beginners, marketers & professionals, built with usability and performance in mind.

Barn2

Barn2

Details

WP Mayor readers get an additional 5% discount to the 30% Black Friday deal! This will be applied automatically at checkout.

Beaver Builder

Beaver Builder

Details

Get 25% off Beaver Builder – the WordPress page builder you can trust with your business.

Bluehost

Bluehost

Details

Bluehost is our recommended WordPress shared hosting provider. Get up to $15 off per month on Bluehost shared hosting.

Free Domain with Bluehost

Free Domain with Bluehost

Details

Get your free domain registration when signing up for Bluehost’s affordable and reliable hosting.

Bulletin

Bulletin

Details

20% off all plans from Bulletin! The easiest and most powerful announcement banner plugin for your WordPress site.

Elementor

Elementor Pro

Details

Join a community of 8M+ professionals who build websites, collaborate, and grow together with the #1 web creation platform for WordPress.

EngineThemes

EngineThemes

Details

Get 35% OFF EngineThemes – WordPress application themes expertly made for your craft.

Essential Plugin

Essential Plugin

Details

Get 15% Off on the Essential Plugin bundle.

Pronto All-in-One

Pronto All-in-One

Details

1 month for FREE to all new customers on Pronto All-in-one solution, a leading photography theme for WordPress.

Groundhogg

Groundhogg

Details

Exclusive 15% Discount off Groundhogg.

Growanizer

Growanizer

Details

Exclusive 30% off Growanizer – the new generation of smart sales for WooCommerce.

Human Presence

Human Presence

Details

Exclusive 20% Discount on Human Presence – stop bot checkouts & form spam without impacting your user experience.

IconicWP

IconicWP

Details

This Black Friday you can get up to 40% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.

IconicWP

IconicWP

Details

This WooCommerce month, get up to 15% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.

Optimal Access KBucket

KBucket

Details

Get 40% Off on KBucket plugin – create a customizable content hub.

Linguise

Linguise

Details

20% off on Linguise – Increase your website traffic with instant translations in more than 80 languages.

Liquid Web

Liquid Web

Details

35% OFF for 4 months on managed WordPress hosting.

Liquid Web

Liquid Web

Details

Get 33% off from Liquid Web – managed WooCommerce hosting specialists.

Magnifi Video Widget

Magnifi Video Widget

Details

Securely embed, customize and make video calls with the Magnifi Video Widget from your website in minutes.

Master Addons for Elementor

Master Addons for Elementor

Details

Exclusive 50% Discount from Master Addons for Elementor.

Newsletter Glue

Newsletter Glue

Details

Newsletter Glue connects your email service to WordPress so you can publish newsletters the way you publish blog posts!
Get 15% off your first purchase.

Notification X

Notification X

Details

Ultimate FOMO and social proof marketing solution trusted by 30,000+ businesses worldwide.

OceanWP

OceanWP

Details

The WordPress theme that gives you more!

Orderable

Orderable

Details

Take online ordering to a whole new level. Get the best price on Orderable with code WPMAYOR.

Outfunnel

Outfunnel

Details

Get 25% off for the first 3 months on Outfunnel – track website visits and sync form submissions to your CRM.

Payment Page

Payment Page

Details

15% Off on Payment Page.

PeepSo

PeepSo

Details

Get 10% Off on a yearly bundle of PeepSo.

Quicq

Quicq

Details

Get 20% off your first two months on all packages of Quicq

Scrollsequence

Scrollsequence

Details

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

ShopReady

ShopReady

Details

Get an exclusive 20% off on ShopReady.

Spotlight PRO

Spotlight PRO

Details

Get 20% off Spotlight PRO to double the impact of your Instagram content!

IconicWP

Stellar Sale

Details

Get 40% off all IconicWP plugins including their bundles (get a massive $199 discount on the All Access Bundle)!

Stellar Sale

Stellar Sale

Details

Get 40% off The Events Calendar Pro – Calendars, ticketing, and powerful WordPress tools to manage your events from start to finish.

Tripetto Pro

Tripetto Pro

Details

Get 10% off on Tripetto Pro licenses.

Unlimited WP

UnlimtedWP

Details

Get a 20% discount off your first month from UnlimitedWP.

Visual Composer

Visual Composer

Details

Get 10% off Visual Composer – Create your WordPress website today. Start easy. Build fast.

WooFunnels

WooFunnels

Details

Double your profits this peak season! Great savings on WooFunnels’ WordPress Funnel Builder & Marketing Automation Engine!

WP Adminify

WP Adminify

Details

Exclusive 30% off on WP Adminify – a powerhouse toolkit for your WordPress dashboard.

WP Buffs

WP Buffs

Details

10% Off from WP Buffs – your 24/7 technical partner for care plans & maintenance services.

WP Draw Attention

WP Draw Attention

Details

Save 40% on Unlimited Editions of Draw Attention – the #1 tool for creating interactive images on WordPress.

WP Engine

WP Engine

Details

Get 4 months free on annual plans or 20% off your first month on monthly plans.

WP Event Manager

WP Event Manager

Details

Get 10% off WP Event Manager – Calendar, ticketing, and powerful WordPress tools to manage your events.

WP Migrate DB Pro

WP Migrate DB Pro

Details

New Customer Offer — Save up to 50% on your first year of WP Migrate DB Pro for individual use.WP Migrate DB Pro allows you to copy your entire WordPress site from one environment to another with one click in your dashboard.

WP Webhooks Pro

WP Webhooks Pro

Details

Exclusive 15% Discount off WP Webhooks Pro. Extend your website with the most powerful webhook system. (Discount applies to first billing period).

Yith

Yith WooCommerce Plugins

Details

Grab everything with a 30% off! No coupons needed.

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.

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% OFFScrollsequence

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 Less20i Hosting

20i WordPress Hosting

Details

Exclusive 50% discount from 20i WordPress Hosting, just for WP Mayor readers.

Astra Pro Coupon Code

Astra

Details

Get an exclusive 10% Discount off Astra Pro, the Essential bundle, and the Growth bundle.

Astra Birthday Sale

Astra Birthday Sale

Details

25% discount on Astra Pro or Astra Agency bundles plus get a free entry into a prize draw to win a brand new iMac!

WooFunnels

Autonami

Details

Exclusive 10% Discount on Autonami – Manage customer relationships using tagging, segmentation, and broadcasts without leaving WordPress.

Avada

Avada

Details

Avada is the ultimate WordPress website builder. Trusted by beginners, marketers & professionals, built with usability and performance in mind.

Barn2

Barn2

Details

WP Mayor readers get an additional 5% discount to the 30% Black Friday deal! This will be applied automatically at checkout.

Beaver Builder

Beaver Builder

Details

Get 25% off Beaver Builder – the WordPress page builder you can trust with your business.

Bluehost

Bluehost

Details

Bluehost is our recommended WordPress shared hosting provider. Get up to $15 off per month on Bluehost shared hosting.

Free Domain with Bluehost

Free Domain with Bluehost

Details

Get your free domain registration when signing up for Bluehost’s affordable and reliable hosting.

Bulletin

Bulletin

Details

20% off all plans from Bulletin! The easiest and most powerful announcement banner plugin for your WordPress site.

Elementor

Elementor Pro

Details

Join a community of 8M+ professionals who build websites, collaborate, and grow together with the #1 web creation platform for WordPress.

EngineThemes

EngineThemes

Details

Get 35% OFF EngineThemes – WordPress application themes expertly made for your craft.

Essential Plugin

Essential Plugin

Details

Get 15% Off on the Essential Plugin bundle.

Pronto All-in-One

Pronto All-in-One

Details

1 month for FREE to all new customers on Pronto All-in-one solution, a leading photography theme for WordPress.

Groundhogg

Groundhogg

Details

Exclusive 15% Discount off Groundhogg.

Growanizer

Growanizer

Details

Exclusive 30% off Growanizer – the new generation of smart sales for WooCommerce.

Human Presence

Human Presence

Details

Exclusive 20% Discount on Human Presence – stop bot checkouts & form spam without impacting your user experience.

IconicWP

IconicWP

Details

This Black Friday you can get up to 40% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.

IconicWP

IconicWP

Details

This WooCommerce month, get up to 15% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.

Optimal Access KBucket

KBucket

Details

Get 40% Off on KBucket plugin – create a customizable content hub.

Linguise

Linguise

Details

20% off on Linguise – Increase your website traffic with instant translations in more than 80 languages.

Liquid Web

Liquid Web

Details

35% OFF for 4 months on managed WordPress hosting.

Liquid Web

Liquid Web

Details

Get 33% off from Liquid Web – managed WooCommerce hosting specialists.

Magnifi Video Widget

Magnifi Video Widget

Details

Securely embed, customize and make video calls with the Magnifi Video Widget from your website in minutes.

Master Addons for Elementor

Master Addons for Elementor

Details

Exclusive 50% Discount from Master Addons for Elementor.

Newsletter Glue

Newsletter Glue

Details

Newsletter Glue connects your email service to WordPress so you can publish newsletters the way you publish blog posts!
Get 15% off your first purchase.

Notification X

Notification X

Details

Ultimate FOMO and social proof marketing solution trusted by 30,000+ businesses worldwide.

OceanWP

OceanWP

Details

The WordPress theme that gives you more!

Orderable

Orderable

Details

Take online ordering to a whole new level. Get the best price on Orderable with code WPMAYOR.

Outfunnel

Outfunnel

Details

Get 25% off for the first 3 months on Outfunnel – track website visits and sync form submissions to your CRM.

Payment Page

Payment Page

Details

15% Off on Payment Page.

PeepSo

PeepSo

Details

Get 10% Off on a yearly bundle of PeepSo.

Quicq

Quicq

Details

Get 20% off your first two months on all packages of Quicq

Scrollsequence

Scrollsequence

Details

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

ShopReady

ShopReady

Details

Get an exclusive 20% off on ShopReady.

Spotlight PRO

Spotlight PRO

Details

Get 20% off Spotlight PRO to double the impact of your Instagram content!

IconicWP

Stellar Sale

Details

Get 40% off all IconicWP plugins including their bundles (get a massive $199 discount on the All Access Bundle)!

Stellar Sale

Stellar Sale

Details

Get 40% off The Events Calendar Pro – Calendars, ticketing, and powerful WordPress tools to manage your events from start to finish.

Tripetto Pro

Tripetto Pro

Details

Get 10% off on Tripetto Pro licenses.

Unlimited WP

UnlimtedWP

Details

Get a 20% discount off your first month from UnlimitedWP.

Visual Composer

Visual Composer

Details

Get 10% off Visual Composer – Create your WordPress website today. Start easy. Build fast.

WooFunnels

WooFunnels

Details

Double your profits this peak season! Great savings on WooFunnels’ WordPress Funnel Builder & Marketing Automation Engine!

WP Adminify

WP Adminify

Details

Exclusive 30% off on WP Adminify – a powerhouse toolkit for your WordPress dashboard.

WP Buffs

WP Buffs

Details

10% Off from WP Buffs – your 24/7 technical partner for care plans & maintenance services.

WP Draw Attention

WP Draw Attention

Details

Save 40% on Unlimited Editions of Draw Attention – the #1 tool for creating interactive images on WordPress.

WP Engine

WP Engine

Details

Get 4 months free on annual plans or 20% off your first month on monthly plans.

WP Event Manager

WP Event Manager

Details

Get 10% off WP Event Manager – Calendar, ticketing, and powerful WordPress tools to manage your events.

WP Migrate DB Pro

WP Migrate DB Pro

Details

New Customer Offer — Save up to 50% on your first year of WP Migrate DB Pro for individual use.WP Migrate DB Pro allows you to copy your entire WordPress site from one environment to another with one click in your dashboard.

WP Webhooks Pro

WP Webhooks Pro

Details

Exclusive 15% Discount off WP Webhooks Pro. Extend your website with the most powerful webhook system. (Discount applies to first billing period).

Yith

Yith WooCommerce Plugins

Details

Grab everything with a 30% off! No coupons needed.

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.

Keep reading the article at WP Mayor. The article was originally written by Colin Newcomer on 2022-07-21 07:00:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

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

Show Your ❤️ Love! Like Us
Scroll to Top