Saturate on scroll

[Jeppe]

Hi. I'm pretty new to GSAP. I have an idea that what I want to achieve is actually pretty simple, but i've been searching the web for hours, and can't fathom where to begin. I want to have an image in color be desaturated from the beginning and on scroll gradually become saturated. Is this a very complex thing to achieve? Does anybody know a simple way of doing it? 

 

Have e lovely evening,

Jeppe

[akapowl]

 

Hey  @Jeppe - welcome to the forums.

 

That should be applicable pretty straightforward by using ScrollTrigger combined with a scrubbing tween.

 

I'll leave this simple tween demo here for inspiration and as a start-point, but I leave it to you to hook it up to ScrollTrigger yourself.

If you run into any problems when trying to combine ScrollTrigger with it, let us know.

 

See the Pen 27bca56324390c2202da4271a9615e99 by akapowl (@akapowl) on CodePen

 

 

 

Note, that tweening on a filter like that might not be the most performant thing to do.

 

 

Happy Scrolling.

[ZachSaucier]

Another option might be to layer a saturated image on top of an unsaturated one and then fade in the saturated version.