PointC

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.

Just FYI - your position parameters were correct in the initial demo. The overlap I saw was that font size rather than a weird overlap tween. The position parameter adjustment fix I posted would still work though. My mistake - sorry about that. Weekend brain. It should still be much easier in a loop and using yPercent. Happy tweening.

Yeah - it's just hard to keep track since the start of one is based on the prior one, but that one is based on the end of the prior one etc... Kinda gets weird and hard to follow with different length words and tweens. I think it might be easier to set this up in a loop and use yPercent to move the targets. This could still present a few challenges though. Here's a fork of your demo with yPercent. https://codepen.io/PointC/pen/bGZaEJR/3edf621a86455b30dd00b80ed2d18174 It woks really well until the 'moment' characters start overlapping the 'time' characters. It's not a miscalculation as you can see that the 't' in time moves in unison with the 'm' in moment. The problem is the width of the m is wider than the first two letters in 'time' so it looks odd. A solution to that is adding a slight delay for the new word to move in like this. https://codepen.io/PointC/pen/wvOpGgP/81a43bf9e46371fbd730053644797add I think that works pretty well and the delay is a variable so you can adjust it to your liking. To further illustrate what we're seeing with the Poppins font, I've switched the first demo to use a mono spaced font with no delay. You can see that everything works perfectly since all letters are the same width. https://codepen.io/PointC/pen/WNmdwRz/7ffb8c2abadabf74ee8e01ca0f2a3904 Since it's all created in a loop now, it's more flexible so you can add as many words as you want and it will all work correctly. You'll still need to manually add a duplicate of the first word to the bottom of the stack in the HTML with these demos, but you could also add some code to clone it if you prefer. Hopefully this helps. Happy tweening