[Tips & Scripts] On-Scroll Animations



Hey @reueleasy, I can confirm that the demo page is working fine on mobile. It sounds like something else might be going on here. Could you DM me with a link to your page?


Hey @Noah, love the script. It definitely adds that something extra to landing pages. I was able to get the original script to run without any trouble, but for whatever reason, the single run animation revision didn’t work for me. Aside from replacing the script shown in the screenshot, is there anything else that needs to be done?


Hey @aelisker! I’ve actually just made an update to the above workaround that I think should do the trick. Would you mind giving it a try and letting me know?


Hey @Noah, I commented the listed portions of code out and was able to immediately get the result I was looking for. Your fix worked perfectly, thanks so much for the code and even more for such a quick response!


My pleasure, glad that did the trick :slight_smile:


Hi Noah - Thanks for the great script.

On mobile though, I noticed the text for the text animation (bounceIn effect) for the title does not scale to 60% of the desktop version, causing the text to render off screen. Is it the expected behavior or is their a workaround?



Hey @lamp, it looks like Unbounce’s text scaling is being applied to the text after the animation runs. I’ll see if I can come up with a way around this, in the meantime you should be able to:


Hi @Noah - The advice is good. And looking forward to a way around text scaling on animation. For now I have to put a smaller font on mobile (can’t use %) one and not display on desktop and vice versa.

There’s just one issue, I put the responsive script you suggest from Mark Wainwright but it’s at the end of the script editor. The other on scroll animation scripts was higher up on the JS variant lists. So other animation seemed to animate first, before the header text animation, probably due to the script execution order. Is there a way to order the Variant Scripts? (Now I have to erase the scripts to put them higher on the order)

Appreciate your advices!


Hi All,

I want my unbounce page with different menu display for you reference pls check http://bairohealth.com/

Usually i will try buttons for link so this time I want something different … pleease help me


I was having the fits getting this script to work. The animate.js library has been updated. it is on version [3.5.2]()

Changing the 1 to a 2 made all the difference in the world.

Just a heads up if you are having issues.


I can’t seem to get the CSS “approved”, which I think is causing my page not to work properly. ANy ideas?

Also, does it matter where we put the .js? I have placed it in the


I have downloaded the .unbounce template several times. It downloads to my (Mac) as a .zip file, and I when I unarchive it, do not see an .unbounce file inside. Unbounce is not allowing me to download the entire .zip file. What am I doing wrong?


Hey @Wahoo,

Give this link a try and let me know if it works for you.


What would be the best way to apply these effects to sticky bars? Has anyone tested it? Any known performance issues there?


Ahhhh, great question @Nicholas! This actually makes me think of all of the many Tips & Scripts we currently have… I wonder how many of them would work well on Convertables?

Curious to see if you’ve tried any @Nicholas!


How can I add a new effect, for instance pulse? I know it says to add on line 41, but I’m not sure how.


Hey @Justin_Veenema running into the same issue as @Wahoo. The dropbox link leads to a page not found error, can I get a fresh link? Thanks!


The dropbox link leads to a page not found error, can I get a fresh link? Thanks!


Totally loving the script!

Unfortunately, on Mobile, some of our headers get re-scaled back up to 100 (instead of staying at 60). This has the unintended effect of causing the title to go off the page. Below, show what the header should look like, versus what happens on Live.

Builder View


Does anyone have a solution to this? The only way I can think of is to create a Desktop & Mobile only header, and have to write the animation line twice.



Tried to implement this at http://www.readyforbi.com/animated-test/ but I can’t get it to work. Any help would be greatly appreciated.