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

[…]

 



This article was written by Colin Newcomer and originally published on WP Mayor.

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

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top