Jump to content
Search Community

Foggy window effect

Blake test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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.
  • Create New...