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:
- Install the Scrollsequence plugin
- Create your animation
- 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
Details
Get an exclusive 10% Discount off Astra Pro, the Essential bundle, and the Growth bundle.
This article was written by Colin Newcomer and originally published on WP Mayor.