OnScroll Animation

  • 2 October 2015
  • 8 replies
  • 445 views
G

After I had managed to apply a “fade in on scroll” effect (working version here http://bit.ly/1Pz5aeI just scroll to see the effect) I tried to do something more complicated and tried to implement these two:

http://codepen.io/bradleyberger/pen/jEGvmp

http://codepen.io/Edward1992/pen/zGuEi

Initially I tried to just embed the whole as HTML block thing but it seems that when you embed it this way it doesn’t fire up animation (my ques it doesn’t recognize elements when embedded); then I tried to somehow apply general principles of the code to elements on my page - no luck whatsoever.

Can anyone help me with this?  

8 replies

G

So I sorted it - JS + AnimateCSS: (example here http://bit.ly/1Pz5aeI)

First paste this into your style code:

" rel="nofollow" target="\_blank" title="Link https//cdnbootcsscom/animatecss/340/animatecss"\>https://cdn.bootcss.com/animate.css/3.4.0/animate.css"\>   
 #lp-pom-text-18, #lp-pom-text-19, #lp-pom-text-248
   { opacity:0;}
 

#lp…are elements that you want to hide until someones scrolls down to them

Then into JS part:

So here you decide which elements would fade in from the left side. You can create a separate script for those fading in from the right all you have to do is change #elements and this part

.addClass(‘animated fadeInLeft’);

Full list of available animation is here
https://github.com/daneden/animate.css

Hope you like it guys;)

J

I really like it! I’m personally a fan of the ‘on-scroll’ animation style, and I’m happy to see that you were able to figure this out. Two questions: 

  1. Have you began A/B testing this against a static version? I would be very interested to see if this has any affect on conversion. 
  2. Would you be interested in putting together a super-simple step-by-step guide for those who aren’t well versed in JS? I can see this being immensely helpful for folks who want to recreate this magic! 
G

HI Justin 

  1. Not yet - we’re about to launch the page next week so once I have some data I’ll share
  2. Definitely - will do it later today
J

Sounds great! Once it’s live, I’ll convert it into an ‘Article’ type so it’s easier to find. :) 

J

Update:
We’ve released a for how to add OnScroll animations to your Unbounce landing page:
/topics/unbounce-tips-scripts-on-scroll-animations

Enjoy!

T

Thanks for your post!
However, somehow the solution GRSM provided works much better for me.
Could someone tell me, how to “toggle” the animation?
I mean, how to make that the animation happen when you scroll down (works already) AND to make the animation reverse when you scroll back to the top of the page (make the object disappear)?

C

Hello, I hope I’m not too late as this was posted a while ago! 

 

Thank you for the insight article, it’s been very helpful. I’ve added the style code and put in the elements I’d like this to take effect on but I can’t find the javascript that I need? 

 

I’ve looked on the link but can’t find the code .addClass (‘animated fadeInLeft’). Can anybody point me in the right direction please? 

Oliver_Lord
Rank
Userlevel 4
Badge

Hey @chloe2210,

 

Thanks for your question. The instructions for adding on-scroll animations can also be found on this page:

In the instructions, there’s a link to both the CSS and Javascript needed to get it to work on your page.

 

Hope this helps :-) 

Reply


Terms & ConditionsCookie settings