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…

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:

• Scrollsequence homepage
• Beauty
• Watch
• Cyberpunk

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:

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:

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:

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.

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:

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:

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:

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

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