[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

Noah
Userlevel 7

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!

A

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

Nicholas
Userlevel 7
Badge +4

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!

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

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

Nicholas
Userlevel 7
Badge +4

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

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

I could but its just a extra step.

Nicholas
Userlevel 7
Badge +4

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

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

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!

Joe

Woah!  This is promising 🙂 great work

E

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.

Nicholas
Userlevel 7
Badge +4

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.

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
Nicholas
Userlevel 7
Badge +4

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

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

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

Phillip

I’d love to take advantage of this, but my landing pages are short. Any tips on making this work with “On Page Load”

J

To make things a bit easier, I’ve edited the post above to include a link to the .unbounce template used in the example. This way you can import the page into your own account and see firsthand how it’s all set up. 
Enjoy!

Noah
Userlevel 7

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

Hey Nicholas, as mentioned further down in the comments, the reason this warning is appearing is because the CSS validator sees a tag outside of the tags in this CSS snippet. This warning won’t affect any functionality, in fact the same thing shows on my demo page.

Noah
Userlevel 7

The reason this warning is appearing is because the CSS validator sees a tag outside of the tags in this CSS snippet. This warning won’t affect any functionality, in fact the same thing shows on my demo page.

Joel_McDonald
Rank
Userlevel 4
Badge

Hey Nicholas,

I can definitely help you out with this too. Look out for a email from me shortly and we’ll dig into your page : ) 

Best, 

Nicholas
Userlevel 7
Badge +4

Hi Joel, we’re having the same problem. Would you mind taking a look at our page too if you have a chance?

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
Joel_McDonald
Rank
Userlevel 4
Badge

Hey Elvis,

Joel here again!

I’m going to take a look at your page and fire you over some instructions. Keep an eye out for my email : ) 

Best, 

E

the Css code seems do not work , i paste the code but it shows “invalid”.

Need help 🙂
![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1399349/RackMultipart20160415-77413-1kg55ml- __2016-04-15 4.53.29_inline.png?1460710430 “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1399349/RackMultipart20160415-77413-1kg55ml-_____2016-04-15___45329_inlinepng1460710430”) ![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1399350/RackMultipart20160415-63576-1mgb8zf- __2016-04-15 4.53.16_inline.png?1460710440 “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1399350/RackMultipart20160415-63576-1mgb8zf-_____2016-04-15___45316_inlinepng1460710440”)

R

code!@@@. Always Comes back to code. ##$

Nicholas
Userlevel 7
Badge +4

For some reason this isn’t working even after following these steps. Does it matter what we name the CSS and Javascript files? The CSS file says “invalid.”

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
Nicholas
Userlevel 7
Badge +4

Same question here. Did you ever figure out step 3, Rich?

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

Reply


Terms & ConditionsCookie settings