Blur effect intersection

[Cristina1]

Hi everybody,

I'm trying to do an blur effect in the intersection between two divs. The goal that I want to get is like the image below. Can anyone help me?

 

Thanks in advance.

See the Pen qBgyvWR by Cristina-Corghi-the-bold (@Cristina-Corghi-the-bold) on CodePen.

[mvaneijgen]

I would first build a proof of concept with just HTML and CSS, before you start introducing GSAP to the mix. I don't even know if this is possible and if it is I would figure it would probably not work in several browsers. 

[mvaneijgen]

Yep, the CSS property you're looking for is called backdrop-filter: blur(10px) and is not widely supported https://developer.mozilla.org/en-US/docs/Web/CSS/filter

 

Hope it helps and happy tweening! 

 

See the Pen bGzjZPN?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Cristina1]

Thank you! That was exactly what I was looking for