Streaming live at 10am (PST)

Scroll interactions and filters?

Hi everyone! I’ve been testing out webflow and loving it so far!
The interactions 2.0 is really nice but I’ve stumbled upon a little problem. I want a whole section, with texts and images, to be greyscale when scrolled into view but I cannot figure out how to do it. Is it possible with the scroll interactions or do I have to do it with custom code?

Best
Peter, Sweden

2 Likes

Hi @Svarte_Peter_J_Barte,

Great question.

Perhaps we could create this interaction by having the full color image overlay the same image, but with the grayscale filter applied:
image

Then, the interaction could change the opacity of the full color image from 100% to 0% as it scrolls into view.

Lastly, IX2 is able to control the color of text. So if you need to change text color on scroll - that would be doable.

Do you happen to have a site we can tinker with?

If so, feel free to provide your share link: https://university.webflow.com/article/sharing-your-sites-read-only-link

I look forward to hearing from you :nerd_face:

  • Micah
1 Like

Hi @Svarte_Peter_J_Barte,

The following URL is an example of what I was describing above: http://grayscale-image-scroll.webflow.io

And the following is the Webflow share link: https://preview.webflow.com/preview/grayscale-image-scroll?preview=5c2b7c071e846c861ad6def16728be28

Hopefully this helps :blush:

  • Micah :nerd_face:
1 Like

Sorry for late response! I just want to thank you for the reply!
I found a workaround with custom code :slight_smile:

Best
Peter