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


Best Low Cost Landing Page & Sales Funnel Builder (Get FREE Trial)
Click here for a free trial!

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

Whose Bio Is This? And Why I Hope It Isn’t Yours

It’s awkward to talk about ourselves. How to reveal just enough of who we are as a person and combine it with our rock star skills and expertise without bragging or boring people?



Planning Your Product Launch

Creating a new product without doing research is very risky as it can potentially waste your precious time, money and resources. First, create an account on JVZoo.com. This is the most well-known affiliate site amongst Internet marketers. It is a marketplace for product creators and affiliate marketers to market their various digital products ranging from e-books, video tutorials, software, apps and plug-in.

Must-Ask Questions Before Getting A Virtual Assistant

What is an entrepreneur’s first thought when they find their workloads too much to handle? For many, they might think, “I need to hire more people.” But there’s a slight problem with this. Getting and taking care of in-house staff members is quite a costly endeavor. Many new business owners don’t realize this until the time comes that they have to handle the payrolls, taxes, and several other headaches.

Earn Easy and Beyond Your Expectation From Online Business Opportunities

The second important factor behind online business success is the reputation and goodwill of the owner. To make an initiative successful in both offline and online platform the trust factor is the ultimate key to build a strong consumer base in the market.

10 Things and What It Means to Be More Marketable

My intention when I started this business was to help people with their message, their copy, and their talks, so that they can then market themselves with confidence. Being more marketable means you reach more of your ideal people and make a bigger difference. It also means more confidence. Confidence gives you more courage to take the leap, the risks

You May Also Like