HomeTutorialsHow to Add Scroll Animation in WordPress (with Code & Plugins)
How to Add Scroll Animation in WordPress (with Code & Plugins)
September 8, 2022
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:
The first method I want to share is using a super handy plugin called Scrollsequence.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.