Hey @Joe_Hargrave1 and @reueleasy!

Sorry it’s taken awhile to address this request. If you’re looking to have the animations run only once, you can remove or comment out:

Give that a try and let me know if it does the trick!

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');

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

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:

• Hide the desktop text on your mobile version
• Create new mobile text, hide this text on desktop version
• Animate this mobile text
• Fire the desktop/mobile animations conditionally using something like this: https://gist.github.com/markwainwright/9bcaf3165bee49c9d93b.

Hi guys, doesn’t seem to work for me?

I’ve put in the javascript and stylesheet code, but no animation works on the live page.

Please see the attached images for the code, stylesheet code & stylesheet error (yet it doesn’t say what the error is!).

*all Javascript’s have the ‘before body end’ tag.

Any help would be greatly appreciated.

Thanks.

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

@Noah this animation is pretty awesome! Thanks
I’m with @Joe_Hargrave1 , I’ve got the animation to work nicely but without refreshing the page when I scroll up the elements disappear and reanimation when I scroll down. I’m sure it’s a simple fix but any advice on how to sort it out?

Thanks a million!

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?

My pleasure, glad that did the trick 🙂

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

Love these animations! This script is really helpful!

I’ve been running into the same issues on mobile and I think I have a solution…

For me, on mobile, I am only having the scaling issues with text that is already on the screen when the page loads. As it turns out, I think it’s just related to animate.css. Unbounce is using -webkit-transform: scale() to adjust text sizes on small screens. I think the animations are interfering with unbounce’s scaling via css transform.

To deal with this, I just wrapped each of my text objects in a box in the unbounce editor and applied the animation to the box instead. Then, I commented out the line that was applying animate first on touchscreen devices. Now it’s all working!

I also made some additional adjustments to the script so elements are animated when the are 1/3 of the screen height from the bottom of the screen…just personal preference.

Soooo slick!

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!