[Change SVG logo color on scroll]

Thanks for this @mikel. This was pretty much exactly what I was looking for.

 

Yea, but looks like it's going to be jittery no matter what. So maybe I'll just change the color on scroll like you did in the previous post.

[Change SVG logo color on scroll]

Ah yea looks pretty much what I am trying to accomplish @PointC ! 

 

So, if I'm understanding this correctly, I need two versions of the logo: one black, and one white?

And then what I am essentially animation is the clip-path? (need to read about how that works :))

 

What I don't get (quite yet) is how do I trigger the clip-path animation based on the background? And would this technique also work for just regular text?

[Change SVG logo color on scroll]

Ah nice! Thanks for that!

I found this tutorial: https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html

where you kinda scroll the alternate logo over, kinda like a mask. Is that possible with GSAP?

And could that be applied to text as well? 

 

I also noticed that you're doing this based on Y-value in scroll. I'm wondering if I can somehow detect what the current background is and that way change the color of the logo.

[Change SVG logo color on scroll]

Hey there,

 

I'm fairly new to GreenSock. 

So I've been working on some SVG animation. I have my logo animate on hover just like I want. Now, I want to have it change color on scroll, so when there's a white background, I want the logo to stay black, and when it's on a black background, I want the logo to be white.

 

Can I achieve this with GSAP?

 

Best, Roo

See the Pen bxwwwd by roogud (@roogud) on CodePen

[Endpoint of stroke is wrong]

I'll look at your code for reference

[Endpoint of stroke is wrong]

Exactly like this!

 

Thanks so much for the help!!

[Endpoint of stroke is wrong]

Ah okay. Yea, I'll probably have to recreate the stroke. Thanks

 

But the plan is to animate a full loop on hover. So it the stroke starts at 100% and then on hover it goes to 0% and then again to 100%. And I'm hoping that the "gap" will act like a mask. Do you think it would be better to have a fully connected infinity symbol and just use offset or would this work?

[Endpoint of stroke is wrong]

Hey all.

 

So I'm trying to animate a part of my logo (the infinity sign). What I eventually want to do is to animate the infinity sign on hover. But I'm just setting everything up and seeing if it works. However, it looks like the endpoint of my infinity sign is the actual endpoint of the stroke. You can see it on my codepen. Can someone help me figure out how I can make the startpoint be the leftMostPoint and have the endpoint be the rightMostPoint?

 

Thanks!

See the Pen xJgQEj by roogud (@roogud) on CodePen