[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

Noah
Userlevel 7

The only issue I see with using this solution as a global script is that the IDs of your elements may be different from page to page.

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
R

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

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”)

J
Badge

Hey all!

 

Can someone please help me with an issue that just started? I’ve been successfully using this script but just noticed on mobile, after the animation happens, it disappears (specifically with ‘bouncein’ animation). 

 

It is only happening on mobile and only on the bounce in effect.

 

When you scroll down, you will see “Meet the guys”. Their picture pops up but then disappears.

 

Can someone check this out and point me in the right direction?

 

www.homeusa.com

 

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, 

J
Badge

@Noah, sorry to bother, any chance you can help me solve this issue above ^^ 

I would appreciate it very much!

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 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, 

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.

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.

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”

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
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
J
Badge

@Md_Mahinur_Khan 

Bump.

Any chance you can look at this for me?

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.

Joe

Woah!  This is promising 🙂 great work

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!

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

I could but its just a extra step.

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

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

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

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!

Reply


Terms & ConditionsCookie settings