What's the best practice to end a gsap animation all at once and roll it back to the initial state?

[sukjae]

What's the best practice to end a gsap animation all at once and roll it back to the initial state?

 

In our example, we want to end all animations under card class and return to the default style.

 

Is it just a way to save all timelines and do kill and clearProps?

++ 

Is doing kill and clearProps the best way to end animation and return to initial style?

 

++

By the way, I'm curious about what clearProps does.

Reset to browser defaults? Or doe revert the style to the state before gsap's edit (before doing set, to,... etc.)

 

If we use clearProps, it seems to revert all styles modified by js libraries other than gsap.

For example, in the example below, I want the h3 tag to remain in green color. But back to default.

 

If we use clearProps, it seems to keep any changes made by the css.

See the Pen BaVvOgO by leesukjae (@leesukjae) on CodePen

[Rodrigo]

Hi,

 

Regardless of the instance type (Tween or Timeline) the best option for what you're trying to do is the revert() method:

https://greensock.com/docs/v3/GSAP/Tween/revert()

 

Also is worth noticing that GSAP Context also has a revert method that reverts every GSAP instance that is added in or to it:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally GSAP Match Media is basically a wrapper for a Context instance (with other capabilities of course) that also has a revert method:
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Let us know if you have more questions.

 

Happy Tweening!