Srollsequence Review

Create a more engaging and engaging experience for your WordPress site visitors?

In our Scrollsequence review, we’ll show you how you can use this freemium plugin to create amazing scrolling animations on your website 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 you’ll start with a real example:

In Few words,  plugin Scrollsequence  helps you create the exact same effect on your WordPress site. All you need to do is upload images, add some text and maybe configure some animations.

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

Keep reading our Scrollsequence review to learn how it works…

Scroll Sequence Review: Exploring the Feature List

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

• Start
• Beleza
• See
• 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 allows you to create standalone pages dedicated to your animations if you prefer.

Animation is not a single animated image or video. Instead, it’s a series of over 50 images put together that seem to animate as a visitor scrolls down.

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

To add content, you can use a simple text editor (the old WordPress editor, also known as 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 scrolling effect, you can animate all elements you add to the text editor. You can also use different animations for different pieces of content, which also allows you to change the text as the user scrolls down.

There are also some other smaller features that you might find useful, which you’ll see in the practice section.

How to create a scrolling animation with Scrollsequence

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

I will walk you through every step of the process which will help you understand how it works and will also show you some of the minor features and configuration options.

Note – I am 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 creating your scrolling animation, you can base it on a single animation sequence or add multiple sequences that change as the user scrolls down. Each sequence within your overall animation is called a “page”.

You can create a single page. Or you can add as many new pages as you like. If you add a new page, it will have its own tab and you can do all the actions I’ll detail below for each page:

2. Prepare and upload your images

v

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

 

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

 

Unfortunately, due to a quirk of how the WordPress uploader works, some of your images may upload out of order. Or, the entire sequence can load backwards. Again, this is an issue with WordPress, not Scrollsequence.

 

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

3. Add content over images

You can then use the TinyMCE editor to add the content that will appear on top of that animation sequence.

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

4. Configure Animations (Optional)

You then have the option to animate the content you added in the editor above. This is optional, but allows you to further enhance the cinematic effect.

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

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

For example, to use separate animations for Heading H1 and Heading H2, you would configure it like this:

Then you would scroll to the Content Animation settings and add an animation. In the Selector column, you will add the ID or class of the element you want to target.

So the rest of the settings are pretty self-explanatory. You may:

Choose a start/stop time for the animation. You can segment this by the image number in the sequence (which the plugin conveniently marks for you).

Choose the from/to animation and the duration of each animation.

You get four different types of animations:

Fade to/from opacity

Move from/to horizontal scroll

Move from/to vertical offset

scale from/to

You can also add multiple animations at the same time.

Here’s what it would be like to have content starting from the left and moving to the right:

5. Configure other page and animation settings

To finish things off, you can configure some misc. settings for the individual page in your animation and your scrolling 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 desktop and mobile visitors:

6. Display your animation

When you’re done, you can display your animation anywhere on the site using your shortcode:

[scrollsequence id=”####”]

You can also use shortcode parameters to add top or bottom margin as follows:

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

Shortcode is currently the only option for embedding your animation in other content, but the developer also has plans to add a dedicated Gutenberg block.

Scroll Sequence Pricing

Scrollsequence comes in a free version on WordPress.org, as well as a premium version with more features.

The free version alone will allow you to create something that looks great, but limits the number of pages and images you can use. It also lacks the advanced animation options and some other features like automatic image scaling.

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

One site – $49.99 for a one-year license or $149.99 for a lifetime.

Five sites – $129.99 for a one-year license or $389.99 for a lifetime.

Ten Sites – $219.99 for a one-year license or $659.99 for a lifetime.

Final Thoughts on Scrollsequence

Overall, Scrollsequence makes it very easy to create these eye-catching scrolling animations on your WordPress site. Not every WordPress site will need this type of animation, but it’s a really cool option for visually focused sites or 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 are no other WordPress plugins that allow you to do this, especially without using your own code.

If you want to try it out, you can play around with the free version at WordPress.org or get a 14-day free trial of the premium version (no need to enter a credit card).