Jump to content


Change colour of svg when scroll past point

Recommended Posts

Hi all,


I'm trying to figure out how an the effect from this site is being done: https://dreamstormstudios.com/projects/ar-hunters/


This might be beyond the scope of this plugin so excuse me if this is the case.


I'm pretty confident I can change the fill colour of an SVG using ScrollTrigger, however if you scroll to the bottom of the page which I have linked and pay attention to the social icons on the bottom left, you will notice that they seem to change colour exactly inline with the boundary of the background, which makes me think this isn't the fill colour but something else which is being manipulated?



Screenshot 2021-03-22 at 12.39.37.png

Link to comment
Share on other sites


Hey @JoeH


When after loading the page you scroll to that last section very fast, you might notice that there are two different sets of icons.


The effect actually doesn't change the color, but works by sort of poisitioning and animating them, so those different sets of icons remain stacked above each throughout the scroll but slowly the icon-set in the later section becomes unveiled.


It's tough to explain it in full detail, but this thread here discusses essentially the same and contains examples that might help you get started.



  • Like 3
Link to comment
Share on other sites

Perfect! Thanks so much

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.