Is it possible to have the svg path change colours as the object moves along it (using ScrollTrigger)?

[smat-ctrl]

I'm wondering if there's a way to dynamically change the color of an SVG path as an object moves along it, specifically using ScrollTrigger. I'd like the path to transition through colors as the object progresses along its path. Does anyone have experience or suggestions for achieving this effect?

 

Essentially as the red ball goes down the path, the path behind it becomes a different color like green and when the red ball goes up from the end marker the path goes back to its original color.

 

If there is any hints or help you can provide me that would be great. Thank you!

 

 

See the Pen bGJxbxR by Samuel-Mathew-the-looper (@Samuel-Mathew-the-looper) on CodePen

[PointC]

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.

 

See the Pen 48ff3b51feeaaec506ed6260b59efa17 by PointC (@PointC) on CodePen

 

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.

 

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

 

Happy tweening.

[smat-ctrl]

Thank you the second modified codepen you provided is exactly what I wanted. Is there anyway to do that without using the DrawSVG Plugin and using the free plugins provided?

[PointC]

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.