roughRabbit

Duuh! Thanks, I was pulling my hair out...

This works for my first button but the next ones fade up - but if I scroll back up only the first one disappears; the next remains. $(window).scroll(function() { if ($(this).scrollTop() > 400) { TweenLite.to("#dellie", .5, { opacity: 1, display: "block", ease: Back.easeOut }); } else { TweenLite.to("#dellie", .5, { opacity: 0, display: "none", ease: Back.easeOut }); } }); /*#dellie1*/ $(window).scroll(function() { if ($(this).scrollTop() > 800) { TweenLite.to("#dellie1", .5, { opacity: 1, display: "block", ease: Back.easeOut }); } else { TweenLite.to(".#dellie1", .5, { opacity: 0, display: "none", ease: Back.easeOut }); } }); I tried naming the functions differently, but that didn't seem to work. I've made a codepen at http://codepen.io/anon/pen/Kvkdf - but don't know how to make the screen big enough to scroll and thus show the animation...

Indeed I do. Thanks for your patience, and your help. Jai

But the codepen by rhernando (with autoAlpha) solves my issue. I just wanted to understand what was causing my problem...

Here is the codepen - apologies for not doing it before. http://codepen.io/anon/pen/hFovE

Thanks for all your help... there is still something strange. I 'm setting up a codepen...

The code below drives a button that toggles various div s on the page on and off, and changes it own visible state - from dellie to tellie: It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear. Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states. $("#dellie").click(function(){ TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut}); TweenLite.to("#dellie", 0.0, {opacity:0}); TweenLite.to(".inacc", 0.5, {opacity:0.4}); TweenLite.to(".note", 2.5, {display:"block", ease:Back.easeOut}); }); $("#tellie").click(function(){ TweenLite.to("#tellie", 0.0, {opacity:0}); TweenLite.to("#dellie", 0.5, {opacity:1}); TweenLite.to(".note", 2.0, {display:"none", ease:Back.easeOut}); TweenLite.to(".inacc", 0.5, {opacity:1}); }); Thanks