Jump to content

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,

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

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:



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.



  • 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.


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




  • 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.