[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

V

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

M

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!

Autopia

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.

J

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!

Nicholas
Userlevel 7
Badge +4

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

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
J

Hey @Wahoo,

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

W

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?

Y

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

Joe_Savitch

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.

sabariiyappan

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

lamp

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!

Noah
Userlevel 7

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:

lamp

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?

Thanks!

Noah
Userlevel 7

My pleasure, glad that did the trick 🙂

A

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!

Noah
Userlevel 7

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?

A

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?

Noah
Userlevel 7

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?

R

Hi @Noah just noticed that for the mobile version the elements that are animated in the Desktop aren’t showing in the mobile version, just blank. Any reason why?

R

That’s pretty awesome @Noah thanks a lot its worked perfectly for me.
@Joe_Hargrave1 I had to make sure my cache was cleared when I republished to test in browser.

Noah
Userlevel 7

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!

R

@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!

J

I’ve got this implemented nicely on a test page.  You can check the page at www.thehoustonweddingband.com  

One thing I need help with though:  How do you get the animations to only load once.  I don’t want them to animate again if someone scrolls to top of screen and back down.  That’s probably a simple thing I’m missing.  Anybody have any idea?

J

This is awesome, Noah! Thanks for the update. 

Noah
Userlevel 7

Hey Elvis, I mentioned this in a comment below:

Because Preview loads over https, any http content will not load (as it throws a mixed content error). The jquery and modernizr references in my script were both referencing http versions, which caused the animations to break in Preview.

I’ve updated my script by removing the http references (see here), so now the animations should work as expected in Preview!

Give it a try and let me know how it goes!

Reply


Terms & ConditionsCookie settings