How to reuse tweens?

[hgl]

I'm experimenting with GSAP, and I have a few questions regarding the pen I created:

 

1. How do I reuse tweens? In the demo, if I alternatively click toggle and yoyo (and clicking yoyo after the page is firstly loaded doesn't seem to work), the animation breaks easily.
2. The two tweens I created actually cancel each other. Is it possible to define one as a reversed version of the other? Note that they have to modify a class.

 

Thanks in advance.

See the Pen eNvRJg by anon (@anon) on CodePen

[OSUblake]

You could use 1 tween for everything by changing its reversed and repeat properties. I'm not sure how you wanted the yoyo to work, like does it always add or remove the class, and does it always go to the top? Here's how I did it. Notice that I positioned some stuff absolutely so I didn't have to deal with the changing of block elements.

 

See the Pen waJrQN by osublake (@osublake) on CodePen

[hgl]

OSUblake, thanks for the help.

 

Unfortunately, in my case, the before and after elements can't be absolutely positioned.

 

Inspired by your code, I give it another try, and this time I simply wrap tweens in functions, and return a new one whenever I need an animation, seems to be working. Not sure if I'm wasting memories?

 

See the Pen gpmzBm by anon (@anon) on CodePen

[OSUblake]

What you did is fine. The simplest solution is usually the best.

 

Does creating a new tween every time use up some memory? Sure. Are you going notice this? Probably not unless you are creating hundreds of tweens/second to do something crazy like a particle effect.

 

With the way your code is setup now, you have basically given each tween/timeline its own responsibility, which means you can reuse them.

 

See the Pen dovKWv by osublake (@osublake) on CodePen

[hgl]

Thank you. I will apply this patten to my code base and see if it really works.