It can be different text, images or anything else. But whatever it is, it’s damn fascinating.
However, if you are not a developer, it can be difficult to add this effect to your own WordPress site.
The scrolling order corrects this. This is a free WordPress plugin that allows you to create custom animated scrolling sequences that work with both mouse and touch devices.
You can use it to create an attractive animation sequence on your homepage. You can also use it in individual posts and pages to offer visitors a more cinematic and engaging way to consume your content.
It’s hard to describe the visual effect with text alone, so you can check out some examples here or here and here to see what I’m talking about. These are concrete examples that you can use to create scrolling sequences. Or I found this cute GIF demo from the developer:
In our hands-on test of Scrollsequence, I’m going to look in detail at how this plugin works and what you can create with it.
Leaflet Sequence Overview: List of functions
Again, I find it hard to describe the scrolling sequence effect in words, because what is unique is the visual appeal. So if you still don’t know what I’m talking about, check out one of the official examples:
In short, Scrollsequence helps you create this effect on your WordPress site without needing any special technical knowledge.
You can create short or long animations by combining a series of images.
You can add content using the familiar TinyMCE editor, and you can customize the animations without code to determine how that content behaves.
Honestly, most of the features are hard to describe without pictures, so let’s get right to the practical part!
Arrows in scroll order
I will now show you how to create your own animation sequence with Scrollsequence.
1. Creating a new page
To get started, go to the Scroll Sequence menu → Add a new scroll sequence. Scroll Sequence uses a custom record type to store your sequences, so you can use the well-known WordPress editor :
The first step is to add a page. In Scroll Sequence mode, you can divide the animation into logical sequences. You can create a sequence with a single page. Or, for longer animations, you can spread your sequence over several pages.
Each page will have its own unique images, content, settings and animations (which you will add in the next steps).
If you add multiple pages, you will see that they are added as new tabs. You can also duplicate existing pages, saving you time in the field:
In the meantime, I’ll start with a page.
2. Add images
Then you need to add your images to your page. The plugin recommends a minimum of 50 to 100 frames as a starting point – so you can create that cool animation effect as visitors scroll down. Instead of an animation, the effect actually scrolls over 50 frames.
If you want to use the same scrolling order on desktop and mobile devices, you should choose a square image format. You can also create separate sequences for desktop and mobile visitors, each with optimized images. For now, you have to use your own code to display the correct version for each type of visitor, but the developer plans to add this as a built-in feature.
I think it would be helpful to have a documentation page on how best to create this set of images, since I didn’t immediately understand how to do it. After a quick Google search, I decided to use this tool to convert the video to JPG, which took the short video file I had downloaded and divided each image as a separate image.
Note – after writing this review, the developers read my thoughts and added helpful instructions here. They recommend VLC or FFmpeg if you want to export as many images as possible, because the tool I use only converts a small percentage of the images.
I downloaded an 18 second video and set the frame rate to 5 FPS. This allowed me to convert my 18 second video into 94 separate JPG images that I use in my scrolling sequence.
Here is my page with the 94 added photos. If necessary, you can change the order by dragging or deleting images.
An interesting feature here would be the ability to change the order of the records as a whole. For some reason, my images were inserted in reverse order (even though they were correctly numbered), and it would have been tedious to manually rearrange the 94 images. This is a problem with the WordPress uploader, not with the plugin itself (because I have the same problem when I upload files directly to the WordPress library).
Note – the developer indicates that this feature is on his roadmap, so we hope it will be there soon.
3. Add content
Once you have selected the images on a page, you will see a new editor where you can add content to that page.
It is a classic WordPress Classic editor, which is convenient because it has a nice and familiar interface :
This content is displayed above the images in this part of the series. If you want to display different sets of content, you need to create another page. You can also add multiple lines of text and animate them differently to display them at different times (more on this later).
You can also add HTML, shortcodes, add-ons, etc. in the editor, giving you more flexibility. This means you can add much more than just text.
4. Add animation (optional)
To animate content, you need to add CSS selectors to the content you want to animate. It’s the most technical part of the process, but it’s still pretty simple.
In the content editor, click the Text tab. Then add an identifier to each text you want to animate. In my example
and
:
Then in the Page Settings, scroll down to the Content Animation section and click Add Animation.
You now want to add the CSS ID as a selector. You can then select the number of the image where the item becomes visible and hide it again. The plugin conveniently numbers them in a list of image sequences, making it easy to get a number.
Then use the From animation and To animation fields to select the type of animation you want to add and its duration. You have four choices:
- Mitigation / Reduction by turbidity
- Displacement from/to horizontal
- Displacement from/to vertical
- Scales from/to
You can also add more than one animation at a time.
It could look like this:
You can repeat the process to restart multiple contents. For example, your subtitle can come after your main title. This allows you to split the content without creating another page.
5. Configuration error page
Finally, you can make various other settings. First of all, you can select the duration of the picture, i.e. the distance between the individual pictures. You can also select options for scaling and aligning images for different types of cameras :
And that’s it for making a page. If you want to create another page in the scroll order, just repeat the same steps.
6. configuration error sequenceconfiguration error
In addition to the page-level settings, you also get some general settings in the sidebar to manage the whole range:
- Scroll time
- Image width
- Image Opacity
- custom CSS
7. Show animation sequence
By default, Scrollsequence creates special custom inputs for each sequence. If you want to send visitors directly to this page, you can do so. You also have a content editor to manage the content of this page.
However, most people prefer to just insert a separate sequence into an existing page or post.
The following abbreviation can be used for this purpose:
[Scrolling sequence id=####]You can also specify the top or bottom field in the label:
[scrollsequence id=#### marginintop=-200px marginbottom=-200px]You can add this shortcut to your own WordPress editor or use it in your favorite page creation plugin like Elementor or Divi.
That’s it! You just created a reactive scrolling animation without custom code.
What about performance?
Since you’re uploading over 50 images to create an animation sequence, you may be legitimately a little concerned about network performance and the impact on your site’s load time.
Fortunately, the plugin takes this into account – it loads/displays the content as soon as the first image has loaded, which still provides a quick delay for the first or largest image with the content, which actually worries human visitors.
Once the first image is uploaded and visitors can see the content, the scrolling background sequence continues to load the necessary additional images.
You still need to optimize your uploaded images so that your first image loads quickly. But you don’t have to worry about how Scrollsequence loads the content, which will affect the visitor’s experience.
Sheet Order Prices
The scrolling sequence is available in both the free version on WordPress.org and the premium version with more features.
The free version allows you to create eye-catching animations, but there are limits to your animation options and the number of images you can place on the page.
If you want the premium version, it’s pretty cheap right now because there’s a discount on the first 100 licenses – you can buy an annual license or a lifetime license:
- A website costs $19.99 per year or $59.99 for life.
- Five locations – $49.99 per year or $149.99 lifetime.
- Ten locations – $89.99 per year or $269.99 lifetime.
You can also try out the Premium features with a free 14-day trial – no credit card required.
Final thoughts on the scroll sequence
The animated sequences created with Scrollsequence certainly catch the eye and this is an effect you will see on many websites.
Before writing this review, I had no idea how to create this effect. But with Scrollsequence, I found it surprisingly easy.
I worked with my first series in less than 30 minutes, and I had no bumps or glitches.
In short, if you want to create this effect, you should try the free 14-day trial of the Premium features (without a credit card) or see if the free version is powerful enough for what you need.
Get the Premium version Get the Free version
Do you have questions about our Scrolling Sequence Test? Ask in the comments section!
Related Tags:
scroll animation wordpress plugin free, animate it wordpress, full section scrolling wordpress plugin, scroll triggered animations wordpress plugin, scroll magic wordpress plugin free, wordpress page animation plugin, section scroll wordpress plugin, page animations and transitions wordpress plugin
