[Tips & Scripts] On-Scroll Animations


Userlevel 7
  • Former Unbouncer
  • 126 replies

This tutorial guides you through creating On-scroll Animations on your Unbounce landing pages. By using On-scroll Animations, you can specify when and where your content is revealed as a visitor scrolls down your landing page.

If used correctly, On-scroll Animations can help you create landing pages that are delightful and engaging.

👁️ See this on a live Unbounce page here.


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Scripts Needed

https://gist.github.com/noahub/88d39d0fb5947efdb25e


Instructions

Step 1.
Copy the latest onscroll_animations.js script and paste it into the Javascripts section of your landing page.

Step 2.
Update the ‘#lp-pom-image-126’ with the ID of your page element.

If needed, you can also change the animation effect by replacing ‘bounceIn’ with any animate.css effect and the timeout duration (in ms) by changing the ‘1000’ value.

Step 3.
Add a new addAnimationData(); function call for every page element you wish to animate.

Step 4.
Paste the onscroll_animations.css CSS code in the Stylesheets section.

Step 5.
Save and publish your page.

Testing

Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion

These animations may require some tweaking to get the timing just right. We’ve given you the ground work, but we would love to see how you implement this on your own pages. This is your chance to get creative and show the Unbounce community how you’re using this.


Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


107 replies

Soooo slick!

Userlevel 7
Badge +4

Noah,  I owe you some poutine & beer.

Next time you’re in Montreal - give me a shout!

Thanks!

Brilliant stuff Noah!

I’m no programmer, but I do know how to follow directions.

Can’t wait to turn this on the world…

Thanks!

OK.

Any reason this would not work as a global script?

Seems like something I’d use at least once on every page. Or am I diving too deep?

Thanks!

Userlevel 7

The only issue I see with using this solution as a global script is that the IDs of your elements may be different from page to page.

Not sure how to do step 3.

Step 3. 
Add a new addAnimationData(); function call for every page element you wish to animate.

I’m sure a couple members of our Montreal Support team would gladly take Noah’s place on that one.

Userlevel 7
Badge +4

Same question here. Did you ever figure out step 3, Rich?

Userlevel 7
Badge +4

For some reason this isn’t working even after following these steps. Does it matter what we name the CSS and Javascript files? The CSS file says “invalid.”

code!@@@. Always Comes back to code. ##$

the Css code seems do not work , i paste the code but it shows “invalid”.

Need help 🙂
![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1399349/RackMultipart20160415-77413-1kg55ml- __2016-04-15 4.53.29_inline.png?1460710430 “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1399349/RackMultipart20160415-77413-1kg55ml-_____2016-04-15___45329_inlinepng1460710430”) ![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1399350/RackMultipart20160415-63576-1mgb8zf- __2016-04-15 4.53.16_inline.png?1460710440 “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1399350/RackMultipart20160415-63576-1mgb8zf-_____2016-04-15___45316_inlinepng1460710440”)

Userlevel 4
Badge

Hey Elvis,

Joel here again!

I’m going to take a look at your page and fire you over some instructions. Keep an eye out for my email : ) 

Best, 

Userlevel 7
Badge +4

Hi Joel, we’re having the same problem. Would you mind taking a look at our page too if you have a chance?

Userlevel 4
Badge

Hey Nicholas,

I can definitely help you out with this too. Look out for a email from me shortly and we’ll dig into your page : ) 

Best, 

Userlevel 7

The reason this warning is appearing is because the CSS validator sees a tag outside of the tags in this CSS snippet. This warning won’t affect any functionality, in fact the same thing shows on my demo page.

Userlevel 7

Hey Nicholas, as mentioned further down in the comments, the reason this warning is appearing is because the CSS validator sees a tag outside of the tags in this CSS snippet. This warning won’t affect any functionality, in fact the same thing shows on my demo page.

Userlevel 7

Basically, for every page element that is being animated you are going to have an addAnimationData(); function call. For example, if you have two images you want to animate, ‘#lp-pom-image-126’ and ‘#lp-pom-image-127’, you would have two lines that look something like this:

addAnimationData('#lp-pom-image-126','bounceIn','1000');addAnimationData('#lp-pom-image-127','bounceIn','1000');

To make things a bit easier, I’ve edited the post above to include a link to the .unbounce template used in the example. This way you can import the page into your own account and see firsthand how it’s all set up. 
Enjoy!

I’d love to take advantage of this, but my landing pages are short. Any tips on making this work with “On Page Load”

Sure thing! Check this article out for some insight on how to modify this for ‘on-load’: 
/topics/unbounce-tips-scripts-css-onload-animation

Userlevel 7
Badge +4

Works like a charm now. Thanks Justin! Don’t know what I was doing wrong the first time, but all the additional replies helped.

Userlevel 7
Badge +4

Here’s one more semi-related question though. Forgive me if this is a dumb question, but in your demo page, how do you animate the orange “scroll” icon at the top to make it pulse? I didn’t see a pulse animation in the code.

Thanks for Joel’s help and Noah’s reply, that’s is true, the “invalid” warning won’t affect any functionality.

The only problem is the _preview panel_won’t show the animations, but it works perfect on the published web page.  

FYI, 

btw, i really get much help from Joel and his colleagues who worked with him.
Thanks a lot.

Woah!  This is promising 🙂 great work

Any way to get this to work without publishing the page? Kind of hard to design when you can’t preview it.
Great Work Though!

Reply