PointC

I'd probably add a small delay on the "reset" tween and set overwrite to true. Something like this:
 

See the Pen 364a470e414172b8fbd6a7420de056f6 by PointC (@PointC) on CodePen
 
More info about overwrite.
 
Happy tweening.

 

I think that will only work if you assign the arrow function to a variable as removeEventListener requires a reference to the function.
 

See the Pen 58144ad0414b9266b9556f00d0b0f91c by PointC (@PointC) on CodePen
 

You'll need to write with an object like this:
tl.to(waveAC, {   morphSVG: {     shape: waveA,     type: "rotational",     origin: "20% 0%"   } }); Happy morphing.  

Clone and append certainly works. Depending on your needs, insertAdjacentElement() could also work. 
 
theSVG.insertAdjacentElement("afterbegin", theAppendedItem); More info:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
 
Happy tweening.

 
 

Please try this:
 
onReverseComplete: function() { gsap.set(swatches[i], {clearProps: 'transform'}); },  

Anything is possible. Some fonts will require much more work and several masks to complete the effect. Whether that's worth all the extra time... 🤷‍♂️
 
I have a tutorial here:
https://www.motiontricks.com/svg-calligraphy-handwriting-animation/
 
See the Pen ba382ee79baa22bfd47028edd4e9247e by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening.

Probably easier to loop through and give each one its own timeline.
 

See the Pen BaPyQdg by PointC (@PointC) on CodePen
 
I also used the GSAP utils.toArray method to select the <rect> targets. That way you don't need to manually create an array or give each one its own ID. You can add as many rectangles as you want and it'll still work as the delay is based on the length of the array. I added a few just for fun.
 
Happy tweening.

 

You'll need to up your filter width/height. I used 150% but you can set it to your liking.
 

See the Pen 6ac6bf4810ef1c0892f473088e6c6a46 by PointC (@PointC) on CodePen
 
But as @Rodrigo mentioned, I'd recommend restraint with that kind of animation when it's so large.
 
Happy tweening.
 

You'll want a stroked path for that with a separate arrowhead element. The tricky bit with masks and motionPaths is that Firefox doesn't like them. To get around that you'll most likely need a proxy element that follows the path and set the position of the masked path to the proxy when the animation updates. Here's a quick example.
 

See the Pen rNKaXEq by PointC (@PointC) on CodePen
 
Some additional reading.
https://www.motiontricks.com/svg-calligraphy-handwriting-animation/
https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/
https://www.motiontricks.com/svg-masks-and-clippaths/
https://www.motiontricks.com/svg-dashed-line-animation/
 
Happy tweening.

FWIW - I'd probably try a custom random wiggle. I used that on my TP pen. Pay no attention to the Pixi related code. The wiggle stuff is all in the wiggle() function.

See the Pen BaNVpWN by PointC (@PointC) on CodePen
 
I also used something similar for all the little floaty shapes on the header of Motion Tricks.
https://www.motiontricks.com/
 
Happy tweening.

 
 

Hi @klyvoon 
 
Welcome to the forum and thanks for joining Club GreenSock. 🎉
 
The issue here is an empty clip-path. If you want the yellow morph to reveal text, you'll need to use a duplicate path in the clip-path. I've forked your pen and just used one path to show you how to do it.
See the Pen 1b01743fc6aa3e078c7d3cd2937967f6 by PointC (@PointC) on CodePen

 
A few other things:
I'd recommend updating to the GSAP3 syntax. Stagger is a bit different now so be sure to check out that difference. Your pen was loading the latest GSAP, but also a really old TweenMax file. (could cause problems)   
Hopefully that gets you morphing. If you have other GSAP questions, let us know and we'll get you sorted out.
 
Happy tweening and welcome aboard.

 

A few examples of cloning your target and putting it on a MotionPath.
 

See the Pen gOoKdOR by PointC (@PointC) on CodePen
 

See the Pen ExVzqdm by PointC (@PointC) on CodePen
 

See the Pen pojmBKJ by PointC (@PointC) on CodePen
 
And for simple dashes, you can animate the strokeDashoffset

See the Pen YzYvLqN by PointC (@PointC) on CodePen
 
Good luck and happy tweening.

Hi @Ves 
 
Welcome to the forum.
 
I think I'd wire this up a bit differently. I'd create a timeline and scrub through it rather than add individual triggers to each element. Something like this.
See the Pen BaYbaNb by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.

 

Okay, now I follow. Yeah - SplitText won't be the answer here.
 
I'd just set it up as one timeline, use the parent container as a trigger and set scrub to true.
 

See the Pen d0c1bbfdfaf738f29d61540e2eef6e19 by PointC (@PointC) on CodePen
 
Happy tweening.

If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 
 

See the Pen 5f9381468bbc6444d1ea73ff780a291a by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.
 

Hi @mangobanan 
 
Welcome to the forum.
 
It sounds like you're looking for something like this?
See the Pen ea1b2a2e3c17fb66429ff548629f39d5 by PointC (@PointC) on CodePen

 
Adding a transform perspective on the containing element can add a lot. You'll also see I split the tween into two as I thought it worked better in this case. Other than that, it's just a little finessing with timing and eases.
 
Happy tweening.

That's because of your onComplete. You're adding tweens to the end of the timeline on each repeat so the timeline is getting longer and longer. I assume you just wanted something like this.
 

See the Pen 9ad77250a0432d7baf26d1e377b56d5d by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.

 
 
 

We all are. Nobody knows it all. 
 
FTR - I'd set this up in a single SVG and do something like this.
See the Pen vYdVwVP by PointC (@PointC) on CodePen

 
You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.
 
Happy tweening.
 

Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.
https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/
 
If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.
https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/
 
Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.

When we make those changes, it all works quite smoothly and should give you the desired results.
 

See the Pen eYVKKVP by PointC (@PointC) on CodePen
 
Happy morphing.

 

Check this please:
 

Sounds like this here:
Happy tweening.

 

Sounds like you're looking for the invalidate method.
https://greensock.com/docs/v3/GSAP/Tween/invalidate()
 
If that doesn't help, an updated demo would be great. Thanks.

 

Hi @fcdobbs 
 
Welcome to the forum and thanks for being a club member. 🎉
 
It's almost always easier to use CSS variables rather then the CSSRuleplugin. Here's a fork with that change. 
 
See the Pen 439cdf2bdddcefdfd533e9c2a852747b by PointC (@PointC) on CodePen

 
You'd also want to avoid any CSS transitions on elements that will be animated with GSAP so you don't cause any conflicts.
 
Happy tweening and welcome aboard.

Okay, I think I understand. Is this what you need it to do?
 

See the Pen ca4d3807850dfc1444f3273ce0365138 by PointC (@PointC) on CodePen
 
 

Hi @soma  
 
Here's a nice little function @GreenSock showed me when I was learning about the new quickTo. I was using a Draggable, but I've modified it a tiny bit to listen for your mousemove event.
 

See the Pen LYQdRWa by PointC (@PointC) on CodePen
 
Happy tweening.