Foggy window effect

[Blake]

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,
B 

See the Pen yqOqVG?page=1& by lindenalee (@lindenalee) on CodePen.

[PointC]

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:

 

 

See the Pen ZjNYNw by PointC (@PointC) on CodePen.

 

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:

 

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.

 

[PointC]

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

 

See the Pen rrgVvO by PointC (@PointC) on CodePen.

Happytweening.

 

[Blake]

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