Change element color exactly when a rotating gradient line passes over it

[Kasabian]

Hi everyone! I’m new to GSAP and could use a hand.

 

I’m animating an SVG where a few arc segments rotate around a center (think accent “glow” lines). I have several dots placed on the same circle, and I’d like each dot to change fill exactly while the line passes over it. Ideally, the dot’s color matches (or approximates) the line’s stroke gradient at the point of intersection (like changes from purple to white). Is this possible with GSAP? Maybe you can give me some hints about it? 🙏 

 

Huge thanks in advance for any guidance or examples! 🫂

See the Pen GgorOmp by Anka_shhhh (@Anka_shhhh) on CodePen.

[GreenSock]

I don't have time to do this for you right now, but here are a few ideas:

1. Temporarily hook up GSDevTools so that you can scrub the animation and see the exact times at which the lines intersect with the dots. Then plug those numbers into your position parameter for the dot color animations. 
2. Or do the math to figure out when the segments would hit the dots based on their angle from the center and the length of the arc(s). It seems like it'd be pretty doable, but outside the scope of help we typically offer for free in these forums (although anyone is very welcome to answer). 

Good luck! 

[Rodrigo]

Hi,

 

As Jack mentions using trigonometry would be one way to go (sin, cos and atan functions). Other alternative that doesn't rely that heavily on trig (still uses it though) is to create the arcs using a fix amount of degrees using SVG's elliptical arc curve function:

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#elliptical_arc_curve

 

Since a circle is 360 degrees you know the percentage of the circle that the arc is, with that and the angle at which the dots are located (which you can translate to x,y coordinates using sin and cos) you can estimate at what percentage of the arc's rotation tween progress the arc start will touch the dot and when the arc's end will stop touching the dot. Then is just about using the position parameter and simple arithmetic to add a Tween that updates the fill property of the dot.

 

Here is an extremely simplified demo that shows this approach:

See the Pen ByjWKre by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Kasabian]

Thanks for your ideas, guys!) It took me a loooong time to implement this 😅, but it turned out really beautiful) A huuuge hugs to you) 🫂