Streaming live at 10am (PST)

Use Scroll triger to Blur an image


#1

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.


#2

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


#3

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


#4

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!


#5

Hello @Mat

Is this what you’re looking for?

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


#6

Hey @Mat

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

Hope this helps :slight_smile: