OnScroll Animation


#1

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?  


#2

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


#3

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! 

#4

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

#5

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


#6

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


#7

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

Enjoy!