You have probably seen those eye-catching website animations which appear as you scroll down, and it feels like the background is moving. Website animations are designed to draw attention.
The content can be images, text, or other elements. Whatever it is, it keeps people interested in the information that’s being presented.
Many WordPress sites can’t achieve this effect without the assistance of experienced developers. One way to get around that obstacle is by using the Scrollsequence plugin.
Using Scrollsequence, you can easily create your own scrolling sequence animation. Animations can be triggered on touch devices and desktop computers.
Your home page or individual posts and pages can have appealing animations that keep people interested in what you have to say. It is an interactive method of engaging site visitors that definitely works.
In this Scrollsequence review, I’ll give you a detailed look at how the plugin works and what you can create.
Scrollsequence is a WordPress animation plugin that allows creating animation sequences on mouse scroll or touch (mobile devices). You can easily convert static images into beautiful animations.
Visitors can scroll through interactive content and see your site come alive right before their eyes. These added touches on the homepage, posts or pages can help your site stand out from the competition.
No technical training or experience is necessary to incorporate amazing animation effects when creating short or lengthy animations by combining a series of images.
Check examples on the official site to see what you can create with the help of the Scrollsequence plugin.
- Your site performance will not be affected.
- Animations, scenes, and images can be reordered at any time with the drag and drop functions.
- Image duration, content animation, and scroll delay are a few of the convenient animation settings.
- The plugin uses the WYSIWYG editor, which supports shortcode and oEmbed.
- Scrollsequence works very well with page builders like Gutenberg, Beaver Builder, Oxygen, Divi, Elementor, etc.
- All content will be visible to search engines.
- All designs are fully responsive. They can be used on different devices without affecting quality.
- Upload media on the backend.
- Images are preloaded in the background.
- You can add unique styles via custom CSS.
- Option to adjust image Opacity and background color.
- Adjust animation speed settings.
- After you create an animation sequence, it will give you a unique shortcode. The shortcode can be added anywhere.
- Use the 14-day free trial to test the pro version.
How To Use Scrollsequence?
After installing the plugin, to get started, go to Scrollsequence > Add New Scrollsequence.
You can add a title for the new Scrollsequence and then add Scenes by clicking on “Add Scene.” Once you’ve done this, a new scene listed as “Scene 0” will be visible.
You can create multiple Scenes if you need longer animations with various effects and images. Clicking on the small plus (+) button next to the Scene will allow you to add more Scenes at any time. Different images, effects, and settings can be set for each new Scene.
The series of pictures is what Scrollsequence’s animation effect is based on. You need to create and upload images in the order you want them to be viewed. For a better overall effect, it is recommended to have 50 to 100 images or more to accomplish the desired results. Instead of a single animation, the effect is actually “scrolling” through all those images.
Upload the images to your WordPress media library and then add them to the Scene by clicking “Select Attachments.”
Numbers beginning at 0 will be automatically assigned to each new image. The drag and drop function allows you to reorder those images as you see fit.
You can also delete all images, reverse their order, or sort images in bulk.
A new editor section called “Fixed Content” will be visible once you’ve selected and added your images to a particular Scene. This editor lets you adjust to content that appears above the image sequences.
You’ll notice that there is already a default heading. You will want to change it according to what you want to display. In the Fixed Content editor, you can add HTML, shortcodes, oembeds, etc.
Animations & Other Settings
When you add images to the particular Scene, you will notice that “Fixed Content Animation” and “Image Scale and Alignment” options also appear.
When “Add Animation” button is clicked, it will display a new menu with the following options:
- Selector – Here, you enter the ID of elements you want to animate b using hash (#). Example: #bigbrains
- Start – Enter the image number from where you want the animation to start.
- End – Enter the image number where the animation will end.
- From Animation – Starting point of the animation.
- To Animation – Ending point of the animation.
Scrollsequence uses image number instead of time. As the user scrolls, this number changes accordingly. You’ll have to decide which elements to animate and define the start and finish of the animation (if you want to use animation).
Using From Animation and To animation, choose the animation effects for start and end.
There are 4 options available to choose from:
- Fade From Opacity – 1 and 0 are the opacity parameters. Once Opacity is at zero, the visibility will be set to none.
- Move From Vertical Offset – This is the vertical movement up and down.
- Move From Horizontal Offset – Here, you’ll have your horizontal movement from left to right and vice versa.
- Scale From – Change the scale of the animated element.
You can combine two or more animations and apply them to the same element.
To add animations to content, you’ll need to add CSS selectors to the content you want to animate. This is a little technical part of the process.
You’ll need to switch to the Text tab in the content editor. Then, add an id to each piece of text that you want to animate.
You will also see the Image Duration option available. Image duration is the distance between each image in the sequence. The current default value is 25 pixels. If you want to increase this, enter a higher numerical value so that the chosen images will appear on the screen for a longer period.
Image Scale and Alignment settings will be underneath the Image Duration option. You can ensure that site visitors using desktop and mobile devices can properly view your created animations by adjusting the screen fit and image alignment.
The default setting is “Scale to fill.” This means replaced content is sized to maintain its aspect ratio while filling the element’s entire content box.
Another available option is “Scale to fit,” which means replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.
No matter which option you select, you will be able to adjust vertical and horizontal image alignment for mobile and desktop.
On the right, you will see additional Scrollsequence settings such as Scroll Delay (how long it takes the animation to catch up after scroll is finished), Image Width (options are content width and force full width), Image Opacity, and Custom CSS.
How To Add Animation To The Site?
When you create a new Scrollsequence and click the Publish button, you will have a unique shortcode for that animation that you can place anywhere on the site. It can even be used with page builder plugins.
Go to the Scrollseqence tab. There, you’ll see the list of animations you created. Under the ‘Shortcode’ column, you’ll find the shortcode for each animation.
Select the shortcode and copy it. Then you can place it on any page or post. I was able to quickly create animation sequence that looks great.
Does It Affect Performance?
Load times and web performance can be significant concerns, especially when using animations containing 100 or more images. Thankfully you have nothing to worry about. The way that Scrollsequence loads content shouldn’t negatively impact site visitors’ experiences in any way.
Once the first image loads, Scrollsequence will load or show content right away. Once the first image is loaded and visitors see the content, Scrollsequence will continue to load additional images in the background.
But image optimization is essential for faster loading times, so always use optimized images. For that, you can use plugin such as Optimole or one of many available WordPress image optimization plugins.
Scrollsequence scroll animation WordPress plugin comes in both a free and premium version with some additional features. Scrollsequence free is a basic and limited version of Scrollsequence Pro.
You can create many beautiful animations with the free version, but you are restricted in terms of the number of images that can be placed in scenes and your overall animation choices.
Free version limitations:
Features in pro version:
- Advanced animation options where you can also animate HTML content.
- Scroll delay feature.
- Any elements that exist on a page can be animated. Sidebar, main menu, etc., can easily be animated.
- The advanced caching and preloading functions allow images to be loaded according to user interaction.
- Priority email support.
- Add your own styles.
- There’s no limit to the number of images that can be added to scenes.
- You can insert multiple Scrollsequence animations anywhere on the page.
The premium version is reasonably priced with lifetime and annual pricing plans:
- One site – $49.99/year or $149.99 for lifetime.
- Five sites – $129.99/year or $389.99 for lifetime.
- Ten sites – $219.99/year or $659.99 for lifetime.
There is also a Business pricing plan which adds Personal Manager and customization pack and is a little pricier. You can test out the plugin’s premium version thanks to a 14-day free trial with no credit card input required.
WordPress Animation On Scroll Plugin
Animations can help audiences understand a company’s brand and message. They are often used to retain interest and highlight different products and services.
Using the Scrollesequence freemium WordPress plugin, you can create fantastic image sequence animations for landing pages, homepage, posts, pages, and other sections to draw interest and keep site visitors engaged.
The animated sequences that Scrollsequence helps create are great, so if you have ever seen such an effect on other sites, you will be finally able to create it yourself with ease.
You don’t need to know anything about code or hire developer. Just choose your animation effect, headings and images. That’s it! Also, adding the animation on your pages is easy, thanks to the use of shortcodes.
You can opt for the free version of Scrollsequence to see how the plugin works. If more functionality is necessary, the pro version can be tested for 14 days (no credit card information is necessary).
If you need WordPress animation on scroll plugin, Scrollsequence is great choice. Websites can reach more potential clients with animations that are created via Scrollsequence. You can get a leg up on the competition by displaying your products with stunning animations that are simply too good to turn away from.
Hope this Scrollsequence review has shown you how easy is to create those stunning animations even with WordPress and you have nothing to lose to see if Scrollsequence is plugin for your needs by testing free version or taking advantage of pro version 14 day free trial.
- Free version available
- Option to test pro version with 14 day trial
- Responsive and SEO friendly animations
- Great tool for creating amazing animations
- You can animate other elements on the page
- Lots of options for animation
- Can be displayed anywhere on the site using shortcode
- Some might find part with Selectors confusing
- Can become expensive if you need to use on 5+ sites
DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.