Blur your site when opening a menu

Now that we have CSS Filters, why not try something cool.

^ open the menu on this site.


edit: actually, if you stare at it for a while, that whole page can be done within Webflow.

1 Like

Awesome, nice idea. Definitely going to try this out when i’ve got time

1 Like

Thats not webflow is it? You can’t apply a filter to an interaction so we can’t exactly do that yet, can we?

yea. that site wasn’t built in Webflow. also, your right. We don’t have filters + interactions. but yes. that would be really cool.

Actually I think we can create this… I think I have some spare time today :wink:

Hi Guys, here’s a first try out for this kind of animation;
http://blurred-out.webflow.io/

Needs fine tuning of course.

2 Likes

:scream: amazing! Show us the ready only link! Please.

1 Like

This is a very rough setup obviously;
https://preview.webflow.com/preview/blurred-out?preview=eb53e46ab178b7446b5db369678f5b10

But with smart use of symbols you can create these kind of full page blurs.
I started with 100% height sections first, but I noticed the blur effect get’s very buggy then, blurring partial sections and not-blurring things outside your view port.

6 Likes

I finally went through your read-only link. OMG! You’re so clever! You made the page content a symbol!

1 Like

yeah that’s the trick i used!