How to Add Scroll Animation in WordPress (with Code & Plugins)

Want to have a really cool interactive scrolling effect on your website? It’s not only possible, but you can create a scroll animation for your WordPress site with just a few clicks.
Table of Contents

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

Do you know that feeling when you find a website with a really cool interactive scrolling effect? You know, the kind of scroll animation that totally distracts you like a kitten with a ball of yarn?

If you’re like me, you might have thought it was awesome, but way out of your league to create. The good news is that it’s not only possible, but you can create a scroll animation for your WordPress site with just a few clicks.

I’ll show you four methods to accomplish it that won’t break your brain:

Create a Scroll Animation with Scrollsequence

The first method I want to share is using a super handy plugin called Scrollsequence.

Scrollsequence website

Scrollsequence helps you create a cinematic scroll animation that has a major visual impact on your visitors. It’s especially well-suited for product displays where you want to have the product rotate 360Β°. The animation will both play and rewind as the user scrolls. Check out their website for an eye-opening example:

How to Use Scrollsequence

The first thing you need to do is install the plugin. You can get the free version on their WordPress.org page, or download a premium version on the Scrollsequence website. They offer a 14-day free trial, so there’s no risk to try it out on your site.

Once you have the plugin installed and activated, navigate to the Scrollsequence menu in your admin dashboard.

Scrollsequence menu

The first section of the menu is a full tutorial on how to use the plugin. I’ll walk you through the basics here just to get you familiar.

Rather than use a GIF or video file, Scrollsequence relies on a series of still frames to create the scrolling video effect. So the first thing you’ll need to do is grab a short video β€” 5-10 seconds or so β€” and export the frames as JPEG sequence files using your favorite editing software. Ezgif converter is a great, free choice. When you have the files saved, head back over to your site and navigate to Scrollsequence>Add New Scrollsequence.

Click Add a Scene, and an Image Sequence* drop down will appear. Click Select Attachments, and add the images you saved. It may take a while for them to load, depending on your connection speed.

Scrollsequence menu

At this point, you can click Save Draft, then preview the animation. Without doing any editing or choosing any settings, here’s what my default scroll animation looked like:

Under Scrollsequence Settings in the right side menu, you can adjust how soon the video starts and ends on scroll, and whether it’s sticky (fixed in place) or static (flows with the page).

When you’re satisfied, click Publish. Then, head back to Scrollsequence in the admin menu. You’ll see your sequence listed with a shortcode.

Scrollsequence menu

Copy and paste the shortcode into any page where you want to display the sequence. You can put as many sequences on a page as you like. Once a sequence is done, it will roll into the next automatically.

There are more features and settings available in Scrollsequence, such as content animation. If you’d like to dig deeper into Scrollsequence, check out the full tutorial in our review article.

Create a Scroll Effect in Elementor

This one is a little different, in that we’ll be starting with a still image rather than a video. We’ll make it move from one side of the screen to the other as the user scrolls.

First, create a new page, then choose Edit with Elementor. Then insert an image onto the page. The effect works best if you use a transparent PNG or SVG file. Set the image size so the movement will be noticeable on scrolling. In my case, I used an image and set the size to Medium – 300 x 300px.

Elementor editor

With the image selected, choose the Advanced tab and move down to Motion Effects. Toggle on Scrolling Effects. I want my skater to move across the page, so under Horizontal Scroll I set Direction to To Right.

Elementor editor

Right away, you can scroll down and test the effect. This was a very simple example, but you can see that the possibilities are almost limitless.

It’s worth noting that you can also use Scrollsequence to add animation on scroll in Elementor, and Elementor Pro has a built-in sticky scrolling effect of its own, even if it’s a bit limited.

Create a Divi Scroll Effect

This effect is similar to the Scroll Effect in Elementor. If you’re a Divi user, you can do it too.

First, create a page and choose to Use the Divi Builder. In my example, I chose one of Divi’s premade layouts β€” in this case, a tennis coaching site.

I wanted to have a tennis ball roll across the screen as the user scrolled down the page. Like the skater I used earlier, I found a tennis ball PNG image on a transparent background.

Divi Visual Builder

Once you have your own image uploaded, click Advanced under the image settings. Move down to Scroll Effects. You’ll see several choices under Scroll Transform Effects. I chose both the Rotate and Horizontal Motion effects.

Test your scroll motion, tweak your settings and that’s it. The folks at Divi Extended have an even more in-depth tutorial about Divi scroll effects that you may find helpful.

Using Anchor Tags and CSS for Smooth Scrolling

The last method I want to share with you is not quite as exciting as the others, but it adds a little bit of animation to your site in a simple way.

If you use anchor tags to help visitors jump to content on the same page, you know how clunky it can look. This method makes the movement smooth scrolling, as if it’s been animated. Here’s how it works.

First, set up anchor tags on your page. Select the text where you want to jump to. In the right side menu under Advanced, place some text in the HTML Anchor field. It doesn’t matter what it is, as long as you remember it. This is your anchor tag.

WordPress editor

Now, select the text you want to link to your anchor tag. Add a link, and in the link field, enter your anchor text with a hashtag in front of it, like this: #link-word.

WordPress editor

Now Publish or Update your page. As I mentioned, the action will be clunky. Let’s fix that. Open your page, and in the top admin bar, select Customize. Scroll down to Additional CSS. Paste this code into the field:

html{
  scroll-behavior: smooth;
}
WordPress Editor

Click Publish, and test the link. Smooth!

Use Scroll Animation to Make Your Pages Dynamic

You can see that it doesn’t take a pro developer or a lot of work to make your pages as dynamic as Apple or NASA. While I showed you four different methods, you can combine them to really wow your visitors.

I encourage you to explore Scrollsequence because it’s a super easy way to turn your visitors into kittens with balls of yarn. They’ll remember your site and will be far more likely to share it with their friends.

D.J. is an experienced WordPress designer, developer, and consultant who has been part of the WP Mayor team as a Writer and Product Review Expert since early 2022. They love all things open source, creating illustrations, and running long distances.

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

All suggestions are anonymous.

More from our blog...

Post a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay updated with WP Mayor's newsletter showcase every week

Stay on top of every new WordPress innovation and latest launches. Receive all our fresh product reviews and expert guides directly in your inbox.

Hosting Survey 2024

Are you happy with your hosting provider or are you over-paying for too little? Have your say below!

"*" indicates required fields

What's the main reason you picked this host?*
How happy are you with your host?*

OPTIONAL: If you'd like to receive the results of this survey, please enter your details below.