timelinemax Can't seem to reverse TimelineMax with mouseover

[ben.harwell.gdt 2 Likes (Newbie)]

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

[Sahil 2,627 Likes (Superhero)]

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

 

[Victor Work 165 Likes (Specialist)]

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 ❤️

[Carl 9,758 Likes (Superhero)]

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.

 

[ben.harwell.gdt 2 Likes (Newbie)]

@Sahil really helpful, thank you for your time!