Have you ever seen those eye-catching website animations where you see a sequence of content as you scroll down and it feels like the background image is moving along with you?
It might be different text, images, or something else. But no matter what the content is, it’s pretty dang engaging.
However, unless you’re a developer, it can be hard to add that effect to your own WordPress site.
Scrollsequence fixes that. It’s a freemium WordPress plugin that lets you create your own scroll sequence animations that work with both mousewheel scrolling and touch devices.
You can use it to create an eye-catching animation sequence on your homepage. Or, you can also use it in individual posts and pages to offer a more cinematic, engaging way for visitors to consume your content.
It’s hard to describe the visual effect with just text, so you can check out some examples here, or here, or here to see what I’m talking about. These are real examples of what Scrollsequence helps you create. Or, I found this nice demo GIF from the developer:
In our hands-on Scrollsequence review, I’ll give you a detailed look at how this plugin works and what you can create.
Scrollsequence Review: The Feature List
Again, it’s hard for me to describe the Scrollsequence effect with words because the unique thing about it is how visually engaging it is. So if you’re still not sure what I’m talking about, check out one of the official examples:
In a nutshell, Scrollsequence helps you create that effect on your WordPress site without needing any special technical knowledge.
Article Continues Below
You can create short or lengthy animations by combining a series of images.
You can add content using the familiar TinyMCE editor and also set up code-free animations to control how that content behaves.
Honestly, most of the features are hard to describe without visuals, so let’s get right into the hands-on section!
Hands-On With Scrollsequence
Now, let’s go hands-on and I’ll show you what it’s like to create your own animation sequence with Scrollsequence.
1. Create a New Page
To get started, you go to Scrollsequence → Add New Scrollsequence. Scrollsequence uses a custom post type to store your sequences, so you’ll see the familiar WordPress editor:
Your first step is to add a “page”. In Scrollsequence, a page helps you divide your animation up into logical sequences. You can create a sequence with a single page. Or, for longer animations, you can divide your sequence up into multiple pages.
Each page will have its own unique images, content, settings, and animations (which is what you’ll be adding in the next steps).
If you add multiple pages, you’ll see them added as new tabs. You can also duplicate existing pages, which helps you save time while working:
For now, I’ll just start with a single page.
2. Add Your Images
Next, you need to add your images to your page. The plugin recommends at least 50-100 images as a starting point – this is what lets you create that cool animated effect as visitors scroll down. Instead of a single animation, the effect is actually “scrolling” through 50+ images.
If you want to use one scroll sequence on both desktop and mobile devices, you should choose a square aspect ratio. You could also create separate sequences for desktop and mobile visitors with optimized images for each. Right now, you would need to use your own code to display the right version to each type of visitor, but the developer has plans to add this as a built-in feature.
I think it would be useful to have a documentation page describing the best way to create this image sequence, as it’s not something I was immediately aware of how to do. After a quick Google, I decided to use this Video to JPG converter tool, which took the short video file that I uploaded and broke out each frame as a separate image.
Note – after writing this review, the developers read my mind and added a useful tutorial here. They recommend VLC or FFmpeg if you want to export as many frames as possible, as the tool that I used only converts a small percentage of frames.
I uploaded an 18-second video and set the frame rate to 5 FPS. This turned my 18-second video into 94 separate JPG images, which are what I’m using in my Scrollsequence.
Here’s my page with all 94 images added. If needed, you can rearrange the order with drag and drop or delete images
One nice feature here would be the option to bulk reverse the order of the images. For some reason, my images were inserted in the opposite order (even though they were properly numbered) and it would be a real pain to manually rearrange 94 images. This is an issue with the WordPress uploader, not the plugin itself (as I experience the same issue when uploading files straight to the WordPress Media Library).
Note – the developer says this feature is on their roadmap, so it should hopefully be here soon.
3. Add Content
Once you select the images for a page, you’ll get a new editor where you can add content to that page.
It’s the regular WordPress Classic editor, which is convenient because it’s a nice familiar interface:
This content will display over the images in this part of the sequence. If you want to display different sets of content, you would create another page. You can also add multiple lines of text and animate them differently so that they display at different times (more on that next).
You can also add HTML, shortcodes, oembeds, etc. in the editor, which gives you a lot of flexibility. That is, you can add a lot more than just plain text.
4. Add Animations (Optional)
To add animations to your content, you’ll need to add CSS selectors to the content that you want to animate. This is the most technical part of the process, but it’s still pretty easy.
In the content editor, you’ll want to go to the Text tab. Then, add an id to each piece of text that you want to animate. In my example, that’s an <h1> and an <h2>:
With that done, scroll down to the Content Animation section of the page’s settings and click Add Animation.
Now, you’ll want to add the CSS ID as the Selector. Then, you can choose the image number where the element becomes visible and is hidden again. The plugin conveniently numbers these in the Image Sequence list, which makes it easy to grab the number.
Then, use the From Animation and To Animation boxes to choose the type of animation you want to add, as well as the duration. You get four options:
- Fade in/out from opacity
- Move from/to horizontal offset
- Move from/to vertical offset
- Scale from/to
You can also add multiple animations at the same time.
Here’s what it might look like:
You can repeat the process to animate multiple pieces of content. For example, you could have your subheading appear after the main heading. This would let you break up the content without creating another page.
5. Configure Misc. Page Settings
To finish things out, you can configure a few other miscellaneous settings. First, you can choose the Image Duration, which is how far apart individual images are. Beyond that, you can choose the Image Scale and Alignment settings for different types of devices:
And that’s it for creating a page. If you want to create another page in your Scrollsequence, you would just repeat the same steps.
6. Configure Misc. Sequence Settings
In addition to the page-level settings, you also get some overall settings in the sidebar to control your entire sequence:
- Scroll delay
- Image width
- Image opacity
- Custom CSS
7. Display Your Animation Sequence
By default, Scrollsequence creates dedicated custom post type entries for each sequence. You could link directly to this page if you want to send your visitors straight to the sequence. You also get a content editor to control content for this page.
However, most people will probably prefer to just embed the standalone sequence in an existing page or post.
To do this, you can use the following shortcode:
You can also specify a top or bottom margin in the shortcode:
[scrollsequence id=”####” margintop=”-200px” marginbottom=”-200px”]
And that’s it! You just created an engaging scrolling animation without any custom code.
What About Performance?
Thankfully, the plugin accounts for this – it will load/display content as soon as the first image loads, which still creates a fast time to first paint or Largest Contentful Paint, which is what human visitors actually care about.
Once the first image is loaded and your visitors can see the content, Scrollsequence will continue to load the additional images that it needs in the background.
You’ll still want to make sure that you optimize the images that you upload so that your first image will load quickly. But you don’t need to worry about harming your visitors’ experiences because of how Scrollsequence loads its content.
Scrollsequence comes in both a free version at WordPress.org as well as a premium version with more features.
The free version lets you create eye-catching animations, but it has limits when it comes to your animation options and how many images you can include on a page.
If you want the premium version, it’s quite affordable right now as there’s a discount for the first 100 licenses – you can purchase a one-year or lifetime license:
- One site – $19.99 annually or $59.99 for lifetime.
- Five sites – $49.99 annually or $149.99 for lifetime.
- Ten sites – $89.99 annually or $269.99 for lifetime.
You can also test out the premium features with a 14-day free trial – no credit card required.
Final Thoughts on Scrollsequence
The animated sequences that Scrollsequence helps you create are undeniably eye-catching, and it’s an effect that you’ll see on a lot of websites, especially those in the creative space.
Before writing this review, I would’ve had no idea how to create such an effect. But with Scrollsequence, I found it to be surprisingly simple.
I was up and running with my first sequence in under 30 minutes and I didn’t hit any snags or glitches.
All in all, if you’re interested in creating this effect, test out the 14-day free trial of the premium features (no credit card required) or see if the free version has enough power for what you need.
Get Premium Version Get Free Version
Any questions about our Scrollsequence review? Ask away in the comments section!