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
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Download the .unbounce template here.
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.
Add a new
addAnimationData(); function call for every page element you wish to animate.
Paste the onscroll_animations.css CSS code in the Stylesheets section.
Save and publish your page.
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.
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?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks