Scrollsequence Review: Add Cinematic Scroll Animations to WordPress

If you want to create a more visually appealing WordPress website, Scrollsequence is an interesting new plugin to consider. It helps you create cinematic scroll animations that draw readers in - keep reading to see it in action and learn more. Plus, get your hands on an exclusive WP Mayor discount!
Our Sponsors
Essential plugins for your WooCommerce store
Build unbuildable WordPress websites
Try Kinsta WordPress hosting risk-free for 30 days
The best no-code Instagram feed plugin for WordPress
Automate marketing for WooCommerce, from hi to buy!

Want to create a more engaging, eye-catching experience for your WordPress site’s visitors?

In our Scrollsequence review, we’re going to show you how you can use this freemium plugin to create incredible scrolling animations on your site without writing a single line of code – just like Apple uses on its Airpods Pro website.

I can’t really describe the full feature set with just text, so I’m just going to start off with a real example:

In a nutshell, the Scrollsequence plugin helps you create that exact same effect on your WordPress site. All you need to do is upload some images, add some text, and maybe set up some animations.

Overall, this is a really neat way to create a more “cinematic” experience on your WordPress website.

Keep reading our Scrollsequence review to learn how it works…

Get 20% off!

Exclusive 20% Discount on Scrollsequence when you use the coupon code wpmayor20

Get Scrollsequence

Scrollsequence Review: Exploring the Feature List

Scrollsequence’s core feature is that it helps you create the unique scroll animation effect from the example above. You can also check out some live examples here if you want to see it in action:

You can create unlimited animations and place them anywhere on your site using a shortcode, with plans to add a dedicated Gutenberg block. The plugin also lets you create dedicated standalone pages for your animations, if you prefer.

The animation isn’t a single animated image or video. Instead, it’s a series of 50+ images all put together that appear to animate as a visitor scrolls down.

You can choose any background that you want and you can also create multiple “pages” to change the background animation as visitors continue to scroll down.

To add content, you’ll be able to use a simple text editor (the old WordPress editor, aka the classic TinyMCE editor). In addition to adding text and formatting it using the editor, you can also include other types of content such as shortcodes from other plugins, oembeds, your own custom HTML, and more.

To add to the scroll effect, you’ll be able to animate every element that you add to the text editor. You can also use different animations for different parts of the content, which lets you also change the text as a user scrolls down.

There are also a few other smaller features that might come in useful, which you’ll see in the hands-on section.

How to Create a Scroll Animation With Scrollsequence

In this section, I’ll show you how Scrollsequence actually works. 

I’ll take you through every step in the process, which will help you understand how it functions and also give you a look at some of the smaller features and configuration options.

Note – I’m using the premium version for this walkthrough, but most of these features are also available in the free version.

1. Create a New “Page”

When you create your scroll animation, you can base it on a single animation sequence or add multiple sequences that change as a user scrolls down. Each sequence inside your overall animation is called a “page”.

You can either create a single page. Or, you can add as many new pages as you want. If you add a new page, it will get its own tab and you’ll be able to perform all the actions I’ll detail below for each page:

Creating a page

2. Prepare and Upload Your Images

Next, you need to upload the images that you’ll use to create your animation. Again, Scrollsequence doesn’t rely on a single GIF image like you might be used to. Instead, it’s a series of 50+ images, which is what allows you to create the immersive effect.

Worried about the performance impact of uploading 50+ images to a single page? Don’t worry! The plugin will display content as soon as the first image loads, so you won’t have any render-blocking issues and your visitor’s perceived load times will still be fine (along with metrics such as Largest Contentful Paint and First Contentful Paint).

To get these images, you can take a short video clip and use a tool to convert it into images for each frame – more on that below.

But first, let’s talk about the aspect ratio for your images.

If you want to use the same animation sequence for both desktop and mobile visitors, the developer recommends that you choose a square aspect ratio. If you’d prefer a wider aspect ratio for desktop visitors, another option is to create separate animation sequences for each type of visitor.

Currently, you cannot achieve this inside the plugin, though the developer plans to add it as a feature. However, you could achieve this with a third-party plugin that allows you to conditionally display a shortcode by device or use your own code.

Next, let’s talk about how to generate the images that you need. Again, you’ll want to start with a short video clip (I’m using a royalty-free clip from Pexels). Then, use one of these tools that the developer tested to convert it into images for each frame. Personally, I used the free Ezgif converter. However, if you want a higher frame-rate conversion, you might prefer desktop software such as VLC or FFMPEG.

With Ezgif, all you do is upload the video file, specify how many frames to convert, and then it will give you a ZIP with all of the images. The developer recommends 50-100 images, so you’ll want to match the frame rate with that number.

I used a seven-second video clip at 10 FPS, which gives me 70 images:

Converting video to images

You’ll probably want to use a higher frame-rate, as 10 FPS makes the animation sequence a little “jumpy”.

Once you have the images, upload them to your Scrollsequence page.

Unfortunately, because of a quirk of how the WordPress uploader works, some of your images might load out of order. Or, the entire sequence might load backward. Again, this is an issue with WordPress, not Scrollsequence.

If that happens, you can use drag-and-drop to drag them into the right order. The developer also has plans to add a bulk reverse feature to save you some time, which I think will be super useful in situations where WordPress adds the images backward:

Uploading images

3. Add Content On Top of the Images

Next, you can use the TinyMCE editor to add the content that will appear on top of this animation sequence.

You can add regular text and format it however you want. Or, you can also include shortcodes, custom HTML, static images, oembeds, etc.

Adding your content

4. Set Up Animations (Optional)

Next, you have the option to animate the content that you added in the editor above. This is optional, but it lets you further enhance the cinematic effect.

To use the animation feature, you’ll need a tiny bit of code, but it’s definitely something non-technical users can do.

The code part is that you’ll need to go to the Text tab of the content editor and add a CSS class or ID to each element that you want to animate.

For example, to use separate animations for the H1 heading and H2 heading, you’d set it up like so:

Adding CSS for animations

Then, you’d scroll to the Content Animation settings and add an animation. In the Selector column, you’ll add the ID or class for the element you want to target.

Then, the rest of the settings are pretty self-explanatory. You can:

  • Choose a start/stop time for the animation. You can target this by the image number in the sequence (which the plugin conveniently marks for you).
  • Choose the from/to animation and each animation’s duration.

You get four different types of animations:

  • Fade to/from opacity
  • Move to/from horizontal offset
  • Move to/from vertical offset
  • Scale to/from

You can also add multiple animations at the same time.

Here’s what it would look like to have a piece of content start from the left and shift to the right:

Customizing the animations

5. Configure Other Page and Animation Settings

To finish things off, you can configure a few misc. settings for both the individual page in your animation and your scroll animation as a whole.

For the page, you can configure the duration of each individual image in the sequence, as well as image scaling and alignment for both desktop and mobile visitors:

Other page settings

And then for the sequence as a whole, you’ll get some sidebar settings to control the scroll delay, image width, opacity, and other details.

And that’s pretty much it for configuring your scroll animation. Now, it’s time to display it.

Full scroll animation settings

6. Display Your Animation

Once you’re finished, you can display your animation anywhere on your site using its shortcode:

[scrollsequence id=”####”]

You can also use shortcode parameters to add top or bottom margin like so:

[scrollsequence id=”####” margintop=”-150px” marginbottom=”-150px”]

Currently, the shortcode is the only option to embed your animation in other content, but the developer also has plans to add a dedicated Gutenberg block.

Scrollsequence Pricing

Scrollsequence comes in both a free version at WordPress.org as well as a premium version with more features.

The free version alone will let you create something that looks great, but it puts limits on how many pages and images you can use. It also lacks the advanced animation options and some other features, such as automatic image scaling.

To remove those limits and get access to all the features, you can go Pro. One nice thing about all of the Pro plans is that they offer a 14-day free trial, so you can test them out at no risk.

  • One site – $49.99 for a one-year license or $149.99 for lifetime.
  • Five sites – $129.99 for a one-year license or $389.99 for lifetime.
  • Ten sites – $219.99 for a one-year license or $659.99 for lifetime.

Final Thoughts on Scrollsequence

Overall, Scrollsequence makes it really easy to create these eye-catching scroll animations on your WordPress site. Not every WordPress site will need this type of animation, but it is a really neat option for visual-focused sites or just generally any site where you want to add a more cinematic feel. It can also be great to create an engaging landing page for a product.

To my knowledge, there aren’t any other WordPress plugins that let you do this, especially not without using your own code.

If you want to test it out, you can either play around with the free version at WordPress.org or get a 14-day free trial of the premium version (without needing to enter a credit card). Remember to use your exclusive WP Mayor discount code: wpmayor20

Get 20% off!

Exclusive 20% Discount on Scrollsequence when you use the coupon code wpmayor20

Get Scrollsequence

Still have any questions about how Scrollsequence works? Leave a comment and let us know.

Colin Newcomer
Colin Newcomer
Colin Newcomer has been using WordPress for over a decade and is on a quest to test all 58,075 plugins at WordPress.org.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Table of Contents

Leave a Reply

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

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.