This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
John Silby
Posted Jun 27 - Read on Facebook

Can you guys add a working GausBlur shape property (like in Sketch) that will auto-blur anything underneath the object, even if its moving?

Im looking at replicating this Dribbble concept and it seems next to impossible to manually align everything once its not drawn from the top corner.

Again: what I want to be able to do is draw the static background out of two shapes. Have my birds animating over it and then render a box over that with a GausBlur property and shadow that will blur the background shapes and any birds that pass under it automatically.

6 Comments

Steve Ruiz

Framer is limited by what WebKit can do, and IIRC that feature is still being worked on for browsers. That said, if you're feeling adventurous and can get it to work in the browser, then you can probably get it to work in Framer too.

Chris Boy

There is a svg Filter you can use... Google back-drop Filter

Jon Sullivan

Try using:

YourLayer.style =
'-webkit-backdrop-filter': 'blur(30px)'

Works okay for me, just play around with it a little till you get what you want.

John Silby

thing is I seem to have found a property to blur everything on any platform, but not a way to restrict it to an object :/

https://framer.cloud/MexNu

Vladimir Strashkov

Jon Sullivan do you know a way of animating this .style =
'-webkit-backdrop-filter' property?

John Silby

Im gonna call this done I guess. Idk how to get the glow behind the circle to disappear and its not worth my time

Read the entire post on Facebook