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:
- 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%:
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 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.
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:
- You add CSS selectors to the content in the Fixed Content box (using the Text tab).
- 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:
And then here’s what it looks like to set up the animation rules:
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.
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:
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:
- Add Elementor’s Shortcode widget where you want the scroll animation to appear.
- Paste in the animation’s shortcode (again, you can find this by going to Scrollsequence → Scrollsequence).
- Click the Apply button in the Shortcode widget’s settings to have Elementor generate a live preview of your animation in the 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:
- Just use the free version of Scrollsequence at WordPress.org.
- 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.
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.