Want to learn how to add an on-scroll animation in Unbounce?
In this post I’ll show you exactly how to add an on-scroll animation step by step, so just watch behind my shoulder.
So keep on reading or watch the video below:
Don’t have an Unbounce account yet?
Check out my link to get an exclusive discount:
Follow along with me and get the code from the official Unbounce community post here.
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
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 our case, it was the 2 images, so you can set either images or text, the animations work on any element.
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!