Use Scroll triger to Blur an image

Hi, im trying to use scroll triger so when someone scrolls an image gets blur.
Does anybody have any idea on how could i achive that?

Thanks in advance!
Gastón.

Here’s a possible work around: You could have two versions of the same image layered on top of one another. The bottom blurred, and the top the original. You can set the top image to decrease in opacity as you scroll to reveal the blurred image below.

Let me knwo if that works! I haven’t actually tried it myself :smile:
Cheers

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Hey @Brando! Do you have an example of “You can set the top image to decrease in opacity as you scroll to reveal the blurred image below” you could point me to?

Thank you!

Hello @Mat

Is this what you’re looking for?

http://testingplayground.webflow.io/reveal-image

1 Like

Hey @Mat

Great question! @aaronocampo shared a solid resource – I wanted to share a quick example as well.

Hope this helps :slight_smile:

2 Likes