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.
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!
Autonami
Details
Exclusive 10% Discount on Autonami – Manage customer relationships using tagging, segmentation, and broadcasts without leaving WordPress.
Avada
Details
Avada is the ultimate WordPress website builder. Trusted by beginners, marketers & professionals, built with usability and performance in mind.
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
Details
Get 25% off Beaver Builder – the WordPress page builder you can trust with your business.
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
Details
Get your free domain registration when signing up for Bluehost’s affordable and reliable hosting.
Bulletin
Details
20% off all plans from Bulletin! The easiest and most powerful announcement banner plugin for your WordPress site.
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
Details
Get 35% OFF EngineThemes – WordPress application themes expertly made for your craft.
Essential Plugin
Details
Get 15% Off on the Essential Plugin bundle.
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
Details
Exclusive 15% Discount off Groundhogg.
Growanizer
Details
Exclusive 30% off Growanizer – the new generation of smart sales for WooCommerce.
Human Presence
Details
Exclusive 20% Discount on Human Presence – stop bot checkouts & form spam without impacting your user experience.
IconicWP
Details
This Black Friday you can get up to 40% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.
IconicWP
Details
This WooCommerce month, get up to 15% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.
KBucket
Details
Get 40% Off on KBucket plugin – create a customizable content hub.
Linguise
Details
20% off on Linguise – Increase your website traffic with instant translations in more than 80 languages.
Liquid Web
Details
35% OFF for 4 months on managed WordPress hosting.
Liquid Web
Details
Get 33% off from Liquid Web – managed WooCommerce hosting specialists.
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
Details
Exclusive 50% Discount from Master Addons for Elementor.
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
Details
Ultimate FOMO and social proof marketing solution trusted by 30,000+ businesses worldwide.
OceanWP
Details
The WordPress theme that gives you more!
Orderable
Details
Take online ordering to a whole new level. Get the best price on Orderable with code WPMAYOR.
Outfunnel
Details
Get 25% off for the first 3 months on Outfunnel – track website visits and sync form submissions to your CRM.
Payment Page
Details
15% Off on Payment Page.
PeepSo
Details
Get 10% Off on a yearly bundle of PeepSo.
Quicq
Details
Get 20% off your first two months on all packages of Quicq
Scrollsequence
Details
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes.
ShopReady
Details
Get an exclusive 20% off on ShopReady.
Spotlight PRO
Details
Get 20% off Spotlight PRO to double the impact of your Instagram content!
Stellar Sale
Details
Get 40% off all IconicWP plugins including their bundles (get a massive $199 discount on the All Access Bundle)!
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
Details
Get 10% off on Tripetto Pro licenses.
UnlimtedWP
Details
Get a 20% discount off your first month from UnlimitedWP.
Visual Composer
Details
Get 10% off Visual Composer – Create your WordPress website today. Start easy. Build fast.
WooFunnels
Details
Double your profits this peak season! Great savings on WooFunnels’ WordPress Funnel Builder & Marketing Automation Engine!
WP Adminify
Details
Exclusive 30% off on WP Adminify – a powerhouse toolkit for your WordPress dashboard.
WP Buffs
Details
10% Off from WP Buffs – your 24/7 technical partner for care plans & maintenance services.
WP Draw Attention
Details
Save 40% on Unlimited Editions of Draw Attention – the #1 tool for creating interactive images on WordPress.
WP Engine
Details
Get 4 months free on annual plans or 20% off your first month on monthly plans.
WP Event Manager
Details
Get 10% off WP Event Manager – Calendar, ticketing, and powerful WordPress tools to manage your events.
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
Details
Exclusive 15% Discount off WP Webhooks Pro. Extend your website with the most powerful webhook system. (Discount applies to first billing period).
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 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.
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.
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.
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!
Autonami
Details
Exclusive 10% Discount on Autonami – Manage customer relationships using tagging, segmentation, and broadcasts without leaving WordPress.
Avada
Details
Avada is the ultimate WordPress website builder. Trusted by beginners, marketers & professionals, built with usability and performance in mind.
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
Details
Get 25% off Beaver Builder – the WordPress page builder you can trust with your business.
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
Details
Get your free domain registration when signing up for Bluehost’s affordable and reliable hosting.
Bulletin
Details
20% off all plans from Bulletin! The easiest and most powerful announcement banner plugin for your WordPress site.
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
Details
Get 35% OFF EngineThemes – WordPress application themes expertly made for your craft.
Essential Plugin
Details
Get 15% Off on the Essential Plugin bundle.
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
Details
Exclusive 15% Discount off Groundhogg.
Growanizer
Details
Exclusive 30% off Growanizer – the new generation of smart sales for WooCommerce.
Human Presence
Details
Exclusive 20% Discount on Human Presence – stop bot checkouts & form spam without impacting your user experience.
IconicWP
Details
This Black Friday you can get up to 40% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.
IconicWP
Details
This WooCommerce month, get up to 15% off IconicWP‘s sales-boosting WooCommerce plugins and plugin bundles.
KBucket
Details
Get 40% Off on KBucket plugin – create a customizable content hub.
Linguise
Details
20% off on Linguise – Increase your website traffic with instant translations in more than 80 languages.
Liquid Web
Details
35% OFF for 4 months on managed WordPress hosting.
Liquid Web
Details
Get 33% off from Liquid Web – managed WooCommerce hosting specialists.
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
Details
Exclusive 50% Discount from Master Addons for Elementor.
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
Details
Ultimate FOMO and social proof marketing solution trusted by 30,000+ businesses worldwide.
OceanWP
Details
The WordPress theme that gives you more!
Orderable
Details
Take online ordering to a whole new level. Get the best price on Orderable with code WPMAYOR.
Outfunnel
Details
Get 25% off for the first 3 months on Outfunnel – track website visits and sync form submissions to your CRM.
Payment Page
Details
15% Off on Payment Page.
PeepSo
Details
Get 10% Off on a yearly bundle of PeepSo.
Quicq
Details
Get 20% off your first two months on all packages of Quicq
Scrollsequence
Details
Get an exclusive 20% discount on Scrollsequence with the WPMAYOR20 coupon. Create your scroll animation in minutes.
ShopReady
Details
Get an exclusive 20% off on ShopReady.
Spotlight PRO
Details
Get 20% off Spotlight PRO to double the impact of your Instagram content!
Stellar Sale
Details
Get 40% off all IconicWP plugins including their bundles (get a massive $199 discount on the All Access Bundle)!
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
Details
Get 10% off on Tripetto Pro licenses.
UnlimtedWP
Details
Get a 20% discount off your first month from UnlimitedWP.
Visual Composer
Details
Get 10% off Visual Composer – Create your WordPress website today. Start easy. Build fast.
WooFunnels
Details
Double your profits this peak season! Great savings on WooFunnels’ WordPress Funnel Builder & Marketing Automation Engine!
WP Adminify
Details
Exclusive 30% off on WP Adminify – a powerhouse toolkit for your WordPress dashboard.
WP Buffs
Details
10% Off from WP Buffs – your 24/7 technical partner for care plans & maintenance services.
WP Draw Attention
Details
Save 40% on Unlimited Editions of Draw Attention – the #1 tool for creating interactive images on WordPress.
WP Engine
Details
Get 4 months free on annual plans or 20% off your first month on monthly plans.
WP Event Manager
Details
Get 10% off WP Event Manager – Calendar, ticketing, and powerful WordPress tools to manage your events.
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
Details
Exclusive 15% Discount off WP Webhooks Pro. Extend your website with the most powerful webhook system. (Discount applies to first billing period).
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.