[Tips & Scripts] On-Scroll Animations

design

#21

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


#22

Works like a charm now. Thanks Justin! Don’t know what I was doing wrong the first time, but all the additional replies helped.


#23

Here’s one more semi-related question though. Forgive me if this is a dumb question, but in your demo page, how do you animate the orange “scroll” icon at the top to make it pulse? I didn’t see a pulse animation in the code.


#24

Thanks for Joel’s help and Noah’s reply, that’s is true, the “invalid” warning won’t affect any functionality.

The only problem is the _preview panel_won’t show the animations, but it works perfect on the published web page.  

FYI, 

btw, i really get much help from Joel and his colleagues who worked with him.
Thanks a lot.


#25

Woah!  This is promising :slight_smile: great work


#26

Any way to get this to work without publishing the page? Kind of hard to design when you can’t preview it.
Great Work Though!


#27

Why not build on a test domain, publish it, and once it works as you like, change the URL and Republish?


#28

I could but its just a extra step.


#29

I hear ya. Yes, I wish there was a “developer mode” or some sort of private testing environment. Would be nice.


#30

Hello, my images are not showing once I’ve added the ID in the javascript. Any idea why this is happening? Thank you.


#31

Couple things to check…

  1. Are you looking at it on a published page? That’s the only way to see the animations I believe.

  2. Did you add the CSS script as advised above? It’s called “onscroll_animations.css

  3. If these things still don’t help, I recommend downloading and uploading the the .unbounce template . That way you can see exactly how they built their working demo, and you can replicate it for one of your pages.here

Hope this helps!


#32

Yes, I can view them once published, thank you.


#33

Hey all, this is a good catch.

The builder’s ‘Preview’ functionality is our version of a ‘testing environment’. But, because Preview loads over https, and 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!


#34

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!


#35

This is awesome, Noah! Thanks for the update. 


#36

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?


#37

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


#38

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!


#39

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.


#40

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?