ScrollSequence: Create full page Scroll Animations

Since the advent of WordPress, making websites has become extremely easy. However, this has led to a high level of competition on the internet.

This factor, along with the shrinking attention spans of users, means that websites have to work really hard to grab users’ attention.

So how can you ensure your website stands out in this crowded marketplace?

One sure-shot way of doing it is to build pages with scroll animations.

So, What are Scroll Animations?

In scroll animation, images in the background and HTML elements (like text, buttons, etc.) move as the user scrolls down the page.

Using it, you can create a high-quality immersive web experience for your visitors, thereby making your website stand out from the competition.

Also, since pages with scroll animations are interactive, it also ensures that users get hooked on your page. Goodbye, high bounce rates!

To get a better understanding of scroll animations, take a look at this video.

Just note that all the images and text on the screen is moving as the user scrolls down the page.

Big brands like SONY and Apple had realized the power of the scroll animation quite a while ago and have been using it to differentiate themselves and stand out from the competition.

So, if the scroll animations are so great and amazing, why aren’t they mainstream yet? Why aren’t many websites using it and people not talking about it?

The reason for it is pretty simple: it is challenging to implement.

Small and medium business owners just don’t have the budget and resources to build full page scroll animations.

Until now…

Enter ScrollSequence

Important Links

• Free Plugin
• Community Support Forum
• Pricing & Licences
• Documentation

What is ScrollSequence?

Simply put, ScrollSequence is a WordPress plugin that helps you implement full page scroll animations with just a few clicks.

However, it is so much more than that!

ScrollSequence seems to be on a mission to democratize scroll animations and make them available for everybody.

What WordPress did to building websites, ScrollSequence might do to scroll animations.

In fact, it is the only product on the market that allows you to create full-page cinematic web animations.

ScrollSequence has also taken care of all necessary things that website owners need from a plugin and built it into their product.

That means the scroll sequences you set up are responsive, and you can choose how your animation behaves on desktop and mobile.

The pages are also SEO friendly, so you don’t have to worry about that aspect as well.

The plugin works on your existing theme, so you don’t have to worry about compatibility issues. So, how do you set up a scroll sequence?

How to Set Up your First Scroll Sequence?

Each Scroll sequence consists of 3 parts: the images, the HTML content, and the animation effect that brings the entire thing together.

The animation is triggered when users scroll.

So, when users scroll the page, images, the text, and the HTML elements on the screen move as per the animation effects set by you, and the entire page comes alive to create an immersive web experience.

So, to set up a scroll sequence, you’ll have to do these things.

In the first step, you’ll have to provide the images that will form the scroll sequence.

In the second step, you’ll provide the HTML content that’ll be a part of the scroll sequence (it can be anything like text, buttons, forms, etc.).

Finally, in the third step, you’ll define the animation rules to bring the images and the HTML content together.

e.g., maybe you want a specific text only to appear for the first ten images and then fade out and want other text to slowly fade in for the next 15 images, and so on, you’ll set all those rules and effects in the third step.

Now that you have a general understanding of how to set up scroll animation with a scroll sequence let’s actually use the plugin and set up a scroll sequence.

First, download the plugin, either from their website or from the WordPress repository.

You can also purchase their paid plan from their website (more on this later)

Upload and activate the plugin as you normally do.

Step 0:

Click on the ScrollSequence button in your WP dashboard to get started.

Give a name to your scroll sequence, and then click on the add page button.

Step 1: Add images

You’ll be adding images in this step.

How many images should you add?

Remember, the higher the number of images you add, the smoother will be the scroll effect, but somewhere between 50-100 should be a good starting point.

If you don’t have those many images for your scroll scene, don’t worry.

You can break down a video into images and use those. There are several tools available online that do it for free.

Once you have your images ready, click on the select attachment button to add images

Once you have added the images, it’s time to select them.

Hold down the CTRL or SHIFT button to select multiple images. Once you select the images, you’ll notice that they are numbered in the image sequence tab.

The images get animated as per the numbering order present here.

So, drag them around and arrange them in the order you want them to appear in your scroll sequence.

Step 2: Adding HTML content

It’s time to add content now. You’ll need to add HTML content, which can make this step tricky but don’t worry, we have a little trick up our sleeves that’ll help you pull this off even if you don’t know anything about HTML.

First, why do you need HTML content?

HTML content is made up of elements. Each element can have one unique ID and multiple classes. Classes and IDs are used as selectors for scroll animation.

Just above the image sequence, where you selected and reordered your images, is your content editor where you’ll type your content.

Type whatever text you want to appear in your scroll sequence.

When you are creating your scroll sequence, the plugin already has some HTML content generated there for you.

All you need to do is replace that content with the content of your choice, and you are done.

Now once you have your content ready, just switch from visual to text tab in the TinyMCE editor and select the text id like done below.

You are going to need this text id in a minute so hold on to it.

Note: In this example, we added HTML text to be part of our ScrollSequence; however, remember you can add any HTML content and make it part of your ScrollSequence.

Step 3: Adding animation and bringing it all together

Animation binds everything together.

As can be seen above, you’ll have to select the starting image number where animation begins.

The ending image number where the animation ends

The text that appears during the scroll sequence is selected by text id, as shown in the figure above.

So put the text id that you had copied from the step above.

Once you enter the text id, the start image number, end image number, you are done. Just hit the preview button and watch the magic.

Some more things that you should be aware of.

Image duration sets how far the images are apart.

Image resolution: naturally, the higher, the better; however, test it out on different devices before finalizing.

Scale to fit or fill: Scale to fit makes the image fit inside the screen. Scale to fit stretches the image, so it always covers full-screen width and height. Make sure to test on both desktop and mobile to make sure that the focus is in the right place.

Image size: lighter images are better for speed, try to find the balance between image size and image quality.

Features:

Feature for the free version:

1. Fully Responsive

This plugin is mobile-first responsive. So, if you are worried about how your scroll sequences look on mobile, don’t worry it’s got you covered!

2. SEO Friendly

Remember a time when all websites used to have a lot of flash elements. Right after that, SEOs drilled into everyone’s head that it is bad for SEO. Soon after, all websites stopped experimenting because it “would be bad for SEO.”

Well, not anymore; you can create as many scroll sequences as you want and put them on your website without worrying about SEO. All the pages with scroll sequences with all their content will be properly indexed by search engines.

Limitations of the free version:

The free version puts certain limitations on usage.

The first is you can use limited images. Thankfully, you can easily bypass this limitation by upgrading to pro.

The second is limited shortcode support, meaning you can insert only one scroll sequence per page using a shortcode. This limitation can again be overcome by upgrading to PRO.

Features of the PRO version:

PRO version users do get certain extra benefits and features, which are:

1. Advanced Animation

This feature lets you animate all the HTML elements.

2. Scroll delay

You can use this feature for a smooth transition during the scroll.

3. Animate any element

The plugin is powered by a GSAP animation engine, so you can animate any element on the page.

Priority email support

PRO members also get priority email support.

Custom CSS

If you are comfortable with it, you can add your own CSS to create your own styles.

Unlimited Images and Full Short Code Support

Is the Scroll Sequence PRO version right for you?

Implementing one scroll sequence is fun and easy, but as your scroll sequence skills improve, you’ll want to make more complex and intricate sequences.

Remember SONY’s scroll sequence video. Imagine your website being the only one in your niche to have such beautiful scroll sequences. Your pages will instantly go viral and be the talk of the town.

However, for that, you are going to need to upload unlimited images, have smoother scroll transitions, and in general, require all the features that the PRO version offers.

You can try the free 14-day PRO version and see how much more you can accomplish with the PRO version before putting money on the table.

Final Thoughts:

Scroll animation is not an entirely new concept. It wasn’t very widespread as it was tough to implement. However, with the introduction of ScrollSequence, we are going to see widespread adoption of scroll animations.

Every website owner always tries to find out ways to stand out in today’s crowded marketplace. ScrollSequence can help you do just that.

If your website is the first one to implement scroll sequences in your niche, you’ll certainly be seen as a trendsetter in your niche.

So, don’t be late to the party, be one of the first ones to implement scroll sequences on your website and race ahead of the competition.