How to animate an svg fill color as you scroll down the page?

[birdyoung]

I have this logo that currently spins as you scroll, which is what I want. But I also need the path fill color to animate to a grey color as you scroll down the page. But not instantly switch to a new color once you scroll. So like if I scroll down a little bit and stop it should be a color between the yellow and the grey color, but not quite the full grey yet until I keep scrolling. Does that make sense? 

 

This example shows the color change animations as you scroll : 

See the Pen ff7dabf8f0946c406bdc61487b4f3f04 by akapowl (@akapowl) on CodePen.

But I tried using a similar method with no luck. 

 

Any help here is appreciated. Thanks

 

Below is my current code attempt:

 

See the Pen Yzjvzpb by mattmcgilton (@mattmcgilton) on CodePen.

[akapowl]

 

Hi there.

 

Your ScrollTrigger is set to end 10,000 pixels after it starts - but since you are not pinning anything, you will never actually have that much height to scroll through on your page. So you might want to change something with that regard. In this fork of your pen you can see that ScrollTrigger actually works just like you tell it to, if there is enough scrollable space; I just set a min-height to the body to demonstrate that.

 

See the Pen dyjKGVX by akapowl (@akapowl) on CodePen.

 

Consider having another look at the ScrollTrigger docs - with regard to end it might also be helpful to have a look at endTrigger.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also it sounds to me, that you actually want two tweens of a timeline to trigger at the same time, so you might want to have a look at how to use the position parameter of tweens on a timeline.