[Tips & Scripts] On-Scroll Animations

8 years ago
19 March 2016
107 replies
3689 views

Userlevel 7

Noah
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?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

107 replies

Page 1 / 5

Thanks for the info on this, I’ve managed it on my page. Are there other effects that bounce in? Is it possible to do a fade in?

Thanks, Chloe

Userlevel 2

Kevin_Garneau
Customer Success Team
31 replies
1 year ago
24 November 2022

@Alexia_Knewledge Do you have your page URL handy I can take a look!

Hi there, I followed the steps and everything works just as fine. Thanks!

But when i try to add a smart back to top button to my landing page, (one of your other tutorial) all of the animations I’ve made so far are disappearing and only the back to top button works then.

Any clue where that may come from ?

thanks a lot

@Md_Mahinur_Khan

Bump.

Any chance you can look at this for me?

@Noah, sorry to bother, any chance you can help me solve this issue above ^^

I would appreciate it very much!

Hey all!

Can someone please help me with an issue that just started? I’ve been successfully using this script but just noticed on mobile, after the animation happens, it disappears (specifically with ‘bouncein’ animation).

It is only happening on mobile and only on the bounce in effect.

When you scroll down, you will see “Meet the guys”. Their picture pops up but then disappears.

Can someone check this out and point me in the right direction?

www.homeusa.com

Olá, boa tarde… Mesmo seguindo todas as etapas o meu não funcionou, pode me ajudar?

O meu não funcionou mesmo seguindo todas as etapas, alguém pode me ajudar?

Hi! I’ve followed all the step and the animatons work great on desktop but thery are very bugged on mobile like headline bigger out of bounderies. How can I deal with it?

I am having trouble figuring out why slide in part not working.
The bounceIn part works.
addAnimationData(’#lp-pom-text-296’,‘bounceIn’,‘1000’); //works
addAnimationData(’#lp-pom-text-270’,‘bounceIn’,‘1001’); //works
addAnimationData(’#lp-pom-text-1285’,‘bounceIn’,‘1002’);//works
addAnimationData(’#lp-pom-text-273’,‘slideInLeft’,‘1003’); //not working
addAnimationData(’#lp-pom-text-282’,‘slideInRight’,‘1004’); //not working
addAnimationData(’#lp-pom-text-298’,‘slideInRight’,‘1005’); //not working

Hello,
I am having a problem with this animation.
Animation works very well in desktop format, but on mobile it doesn’t.
In fact, the elements I want to animate are at the top of the page and I have the impression that the scroll does not trigger and nothing happens.
For the other elements which are lower in the page it works because the scroll can be done.

How do I animate the elements at the top of the page

Could you help me ?
Thank you !

This URL is dead. 😦

How do I get the two codes for slide right and slide left to work? They don’t seem to be working…

I have added the code and on the desktop version everything is good but when I look at the live mobile page it has elements missing and does not load correctly… Any advice or a fix for this??

Yes it might not be working because of some adding code which you have used.

I will share the dummy link of a page which i just created and added animation to it. You can check it source code and copy the script from it which might help

http://unbouncepages.com/animation-test-zaid/

Hey Zaid
First of all - thank you very much for your prompt response!
It still does not work for me, but I may be doing something wrong … Can you take a screenshot of the JS codes that are on your page where the animation works? … And if you also put CSS code then I would love to get a screenshot of it …
Something does not work for me and if your way does work, it means that it will be possible to put all kinds of animations and that’s great … because in the way I have had so far - only two manage to work …

By the way - do you think that other codes I have may affect your codes? and maybe this is the reason it’s not working?
Thanks for your help

Merav

‫בתאריך יום ג׳, 4 באוג׳ 2020 ב-8:36 מאת ‪Zaid Nazir via Unbounce Community‬‏ <‪unbounce@discoursemail.com‬‏>:‬

You can keep in the head

And if this still doesnt work try adding another js file in the second step

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script>
  $('#lp-pom-image-58, #lp-pom-image-63 ,#lp-pom-text-57, #lp-pom-button-60').attr({ 
    "data-aos":"fade-up",
    "data-aos-duration": "3000", // you can change the duration here 
    "data-aos-once":"true"  // for animation to happen just once
  });
</script>

And if you want you can remove the CSS link file from the first step and add it separately in the CSS file
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Dear Zaid
your java cods for animation are not working for me…

in the second java - you didn’t mention where to put it (Head? Before/After body and tag?)
it should work without any CSS code?
I can’t understand why it’s not working for me…
thanks
Merav

‫בתאריך יום ב׳, 6 ביולי 2020 ב-9:57 מאת ‪Zaid Nazir via Unbounce Community‬‏ <‪unbounce@discoursemail.com‬‏>:‬

Is it possible to run it in loop?

I have found a much easier and effective way to do it. 🙂

Step 1: Add this code in the javascript and keep its placement to the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <script>
    AOS.init();
 </script>

Step 2 Create one more javascript file and add this code.
Update the ‘ #lp-pom-image-58 ’ with the ID of your page element. Here you can add multiple ids of the elements you want to give animation to

If needed, you can also change the animation effect by replacing ‘fade-up’ with any other effect eg: fade-up, fade-down, fade-right, fade-left, fade-up-right, fade-up-left, fade-down-right, fade-down-left, flip-left

You can check the effects from the link mentioned below
http://michalsnik.github.io/aos/

<script>
  $('#lp-pom-image-58, #lp-pom-image-63 ,#lp-pom-text-57, #lp-pom-button-60').attr({ 
    "data-aos":"fade-up",
    "data-aos-duration": "3000", // you can change the duration here 
    "data-aos-once":"true"  // for animation to happen just once
  });
</script>

Step 3 Save and publish your page.

Great 👍

בתאריך יום ו׳, 22 במאי 2020 ב-17:01 מאת Joyce Thamrongvisith via Unbounce Community <unbounce@discoursemail.com>:

my god!! thank you so much my site look so much alive after I’ve applied this code!!!
magic 😉

Hey Roberto

I found a solution- just make for each animation a deferent code, That means- don’t put it with comma one after another- put a whole deferent code for each element you want animated ! It works

doesn´t work for me either

Hey Noah
Did you get my question? I would love to get your help can you please answer and let me know how to solve the problem? Do you need to see the code ? I can past the code here if that will help…
thank alot 🙂

Page 1 / 5

How to Install in Unbounce

Scripts Needed

Instructions

Testing

Conclusion

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded