Jump to content
Search Community

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

birdyoung test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites


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.




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.



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...