Unbounce: How to Add an On-Scroll Animation to Any Element

Want to learn how to add an on-scroll animation in Unbounce?

In this video I’ll show you exactly how to add an on-scroll animation step by step, so just watch behind my shoulder.

Don’t have an Unbounce account yet?

Check out my link to get an exclusive discount:

👉 Unbounce free 14-day trial + 20% off on the first 3 months: https://go.ivanmana.com/unbounce

Follow along with me and get the code from the official Unbounce community post here:

👉 https://community.unbounce.com/t/tips-scripts-on-scroll-animations/3221/84

You will need to go here to get the codes needed to add to your page.

That being said, let’s get straight into it.

Step 1: Add the codes to your Unbounce page

First, head over to the Unbounce community URL linked above and copy the JavaScript code.

Paste it before the ending body tag of your Unbounce JavaScript section in the bottom-left of the page.

Name this something like “on-scroll animation” or something like that so you can refer to it easier later on.

Next, head back to the Unbounce community page linked above and paste the CSS code given in the CSS section of your page.

*Note: If you find that something doesn’t work for you, change the “3.5.1” to a “3.5.2” and see if that works.

But that’s it for the first step in this on-scroll animation in Unbounce tutorial.

Let’s move on to the next one!

Step 2: Adapting the code to your page

In the JavaScript portion, change the element ID to the ID of YOUR element that you want to have the animation.

In our case, it was the 2 images, so you can set either images or text, the animations work on any element.

Keep in mind that if you want different animations for different elements, you will need to create MULTIPLE JavaScript codes for each of these elements.

If you are OK with having the same animation however, then you can simply stack the element IDs one of top of another in the same code tab.

In our case, we wanted one animation for the images and another for the text – so we set up an “on-scroll animation – images” code and an “on-scroll animation – text” code.

From here on, you can play around with the exact animation you want, such as bounceIn, lightSpeedIn, etc… just change it up to whatever you want.

Also, you can change the number presented to specify the number of milliseconds you want to pass before the animation shows up as you scroll to that part of the page.

So if you set the number to “1000”, that’s 1000 milliseconds, or 1 second after scrolling to that page section before the element shows up via that animation.

That’s pretty much it – play around with this and if you have any questions, take a look at the community post linked above – most of the solutions shown in this video were found using this post.

And that’s how you create an on-scroll animation with any element in Unbounce!

Additional resources:

👉 Free 55-page guide to affiliate marketing: https://ivanmana.com

👉 Paid ad network courses: https://ivanmana.com/all-courses

👉 Unbounce free 14-day trial + 20% off on the first 3 months: https://go.ivanmana.com/unbounce

👉 Unbounce complete playlist: https://www.youtube.com/watch?v=NCRKGaWkdms&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

👉 Like my Facebook page!: https://facebook.com/onlinemarketingessentials

source