PointC

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.

 

I'm not 100% sure as I didn't build that demo, but all the sections are stacked on top of each other so this may be a target/z-index issue. If you add the .ignore class to the header, you see it is indeed ignored.
 
Here's another simple example where I've told the Observer to ignore the .green and .orange targets.

See the Pen cd77c0fbf45bc990d3baf4213529e43f by PointC (@PointC) on CodePen
 
You can see that the ignore works exactly as expected. I didn't have much time to dive too deep into your forked demo to see the exact reason, but maybe @GreenSock can clarify a little bit.
 
Happy tweening.

Hi @Consequence 
 
Thanks for being a Club member. We really appreciate it. 🎉
 
I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. 
 
See the Pen zYRpBbm by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening.

If you don't want to use two elements, it sounds like a good use case for CSS variables.
 

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

This was just discussed and built in this thread.
 
Happy tweening.

 

So you want the blue target to just follow the sections up and down. Like this maybe?

See the Pen 5fc0b34c5556a20c14682af588926e38 by PointC (@PointC) on CodePen
 
Does that help?

Hi @Tedev 
 
Welcome to the forum.
 
I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.
 
Fixes: 
Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway. Switch the order of the tweens  Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.  
Here's a fork with #2.

See the Pen 40f3539166669a535bddf0860dc34ace by PointC (@PointC) on CodePen
 
Happy tweening and welcome aboard.

 

Hi @nicoleanowa 
 
Welcome to the forum.
 
My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking.
 
See the Pen 473a8aa94e4274966c383d83bbd3646f by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.

 

Hi @Willy Christian 
 
Welcome to the forum.
 
Looks like you have some overlapping media queries. I think you'd want to set a min and max for each one like this:
 
See the Pen f86870c78eec4ef7e0c13e8c3775311d by PointC (@PointC) on CodePen

 
Happy tweening.

 

I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. 
 
The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity.
 
Make sense?
 
Happy tweening.

 

You'll need to move those elements outside of your scroll wrapper.
 

See the Pen dfe28e138684e056e0dc54f7fc605d9c by PointC (@PointC) on CodePen
 
 
From the docs under Caveats:
position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.
 
https://greensock.com/docs/v3/Plugins/ScrollSmoother
 
Happy tweening.

 

Hi @ApriSix
 
Welcome to the forum.
 
You're not actually playing that timeline with the play button. You're just calling the function that returns the timeline which is not in a paused state so it immediately plays. I'd recommend assigning that returned timeline to a variable and then you can control it with all the available methods.
 
Something like this:
See the Pen 9a55e829614b45f31e20adf3e04957bd by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.