Jump to content


Can't seem to reverse TimelineMax with mouseover

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm looking to reverse the TimelineMax onComplete but I can't seem to get it to work. I'm new to this library, there are probably better ways to achieve what I want here. I'll list out the goals:


  • Auto play a tween of the blocks from left to right (working in this Codepen)
  • On mouseover and eventually on touchover reverse the animation with reduced speed and continue to move (working in this Codepen)
  • When the animation goes fully out of the window reverse and come back across the other way (not working)


I've tried a few different ways/options but no luck so far. Any help would be appreciated.


See the Pen GBMgVR by ben-harwell (@ben-harwell) on CodePen

Link to comment
Share on other sites

I am not sure if you changed your demo after posting the question as it contradicts a bit.


Anyway, following is demo how you can do it by taking advantage of different inbuilt features of GSAP and avoid some calculations. I have left comments to explain some key parts of the demo. Check docs to read more about invalidate


See the Pen LBzdRG?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Is Invalidate () a new feature?
I gave a quick read in the documentation,

there I wanted to understand the main points of difference between invalidate () and clearProps ().
And congratulations to all staff that even in the users believing GSAP is quite complete, but you still keep working and surprising us with news.
So I always recommend to my friends dev that they invest in the acquisition of the premium subscription,

it is the minimum to compensate for such dedication that you put in lib ❤️

  • Like 4
Link to comment
Share on other sites

Hi Noturnoo,


Thanks for the kind words about GSAP. We wouldn't be where we are without all the help from the moderators, community members, and loyal customers like yourself!


The video in the docs is my best explanation of invalidate(), where it differs from clearProps is that invalidate removes (start / end) values that the engine has  recorded whereas clearProps removes the inline styles from the element that was animated.


For instance you can have a tween that does


var tween = TweenLite.to("#logo", 1, {opacity:0});


After that tween runs the #logo will have an inline style like


<div id="logo", style="opacity:0"></div>


If you then clearProps on that element


TweenLite.set("#logo", {clearProps:"all"});


it will remove the style and reset the #logo back to its normal opacity


<div id="logo", style=""></div>


But tween still remembers that the start opacity was 1 and the end opacity is 0 and you can restart() it and it will play again as you expect.


Whereas if you do tween.invalidate() it will not change anything in the inline style, it will just be forced to record new values that next time it plays.


Hopefully that helps clear things up.


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.