Leaderboard

The perceived lag is coming from the timeline duration increasing each time your slideAnimate() function fires. Check out this fork of you pen. Keep scrolling your mousewheel over it. See how the duration keeps increasing? There is no lag or delay. You're just making the timeline longer. I think your best bet here is to create a timeline for each slide and assign the active one to a variable much like @Carl's demo here: You can assign the active slide to that variable, reverse it on a mouse wheel event and then assign the new timeline as current and play() it when the reverse is complete. You also have a problem with interrupting the current animation. I know Blake asked you about this in one of your other threads. Can the user interrupt it? If not, you need to prevent that with the isActive() or isTweening() methods. https://greensock.com/docs/TweenMax/isActive() https://greensock.com/docs/TweenMax/static.isTweening() Happy tweening PS It's not necessary to quote an entire answer in your replies. It makes the thread harder to follow. You can quote an answer and then edit that quote to only the relevant parts. Thanks.

Here's a quick demo you can tinker with to get some ideas. It's the weekend so it's nothing fancy. Happy tweening

Hi @piyush walia If I understand your question correctly, I'd recommend using clearProps rather than jQuery's removeAttr() method. I think if you change your reset function a bit, you should see the desired behavior. Please try this: function reset(){ TweenLite.set(".block_1, .av2", {clearProps:"all"}); $(".block_1").addClass('block_2').removeClass('block_1'); $(".av2").addClass('block_1').removeClass('block_2'); }; Hopefully that helps. Happy tweening.

So you literally want the string "opacity:0" to animate to "opacity:1" (not the CSS property of the element), right? And in the upcoming release of GSAP 1.20.5, you'll be able to leverage a new feature of roundProps that'll make it a bit easier: Is that what you're looking for?