PointC

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

Using preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread: I would probably come to the same conclusion as that thread and generate the curved line dynamically. Happy tweening.

You can set the stroke-dasharray and animate the stroke-dashoffset with CSS, but I'd recommend using drawSVG as it solves a lot of browser inconsistencies. Happy tweening.

Welcome to the forum. If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates. https://codepen.io/PointC/pen/xxeaKeo/48ff3b51feeaaec506ed6260b59efa17 If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll. https://codepen.io/PointC/pen/dyLqybY/f291cb8f00561f83216ca7df0680ea9b Happy tweening.

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.

sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening.

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.

hmmm... the only other ones that come to mind off the top of my head are these:

Is this the one you meant?

Yeah - I'd be curious about what you're building as well. Maybe a demo? You can find more info about lagSmoothing under the gsap.Ticker() property. https://gsap.com/docs/v3/GSAP/gsap.ticker()#gsaptickerlagsmoothing Happy tweening.

Looks like you'd need immediateRender:false on that second tween. https://codepen.io/PointC/pen/QWoXMwx/5f531240826885ac537b347426264207 Happy tweening.

+1 except I now have to say Illustrator instead of AI otherwise everyone gets confused. 😜

Here's an oldie but a goodie from our own @OSUblake. Should give you some ideas. https://codepen.io/osublake/pen/oGoyYb

A couple tutorials which may help. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ Other helpful info. https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening.