Blake

Foggy window effect

Recommended Posts

Hi there, can anyone direct me to some examples of a foggy window effect created with GSAP?

I'd love to see any examples or ideas that would show the screen getting foggy, then the fog being wiped away. 

I've added a pen that someone else made, but shows the direction I'd like to go in. Thank you Natalia for the pen :)

Thanks in advance,

Share this post


Link to post
Share on other sites

Hi @Blake :)

 

I moved this thread to the GSAP forum since it wasn't banner specific. You'll probably get more eyeballs on it over here.

 

My thought would be to use a fractal noise pattern as a mask over a solid colored square (or whatever shape you need). That is then placed over the top of the image. By masking a solid colored shape you can easily change the color of the glass if you like. Maybe something like this:

 

 

 

I used a fractal noise pattern and blurred it quite a bit so the effect is really subtle. This is a thumbnail version of the actual image I used:

AyETrFb.jpg

 

You could make the effect much more obvious by creating an image with more contrast. You wouldn't actually have to use a fractal noise pattern. A gradient would work fine too, but I think the fractal gives you more options. With a little extra effort you could add some drips and/or water droplets if you like.

 

Hopefully that gives you some ideas. Others may jump in with additional thoughts. Happy tweening.

:)

 

  • Like 6

Share this post


Link to post
Share on other sites

Just for comparison, here's a version with a heavy contrast and less blur so the effect is much more obvious.

 

Happytweening.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites

Thank you so much for these very helpful ideas! I'm excited to experiment with this. 

  • Like 2

Share this post


Link to post
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.