Hey everyone. I'm struggling with adding a blur effect to a NavBar in my Prototype. I know how to get a simple Scroll Component(Just an Image) blurred behind the NavBar. But my Prototype consists of 2 other layers which are moved, when the ScrollComponent is moved. I created a rough, simple concept. http://share.framerjs.com/hd8cgibiu1kp/ Basically I want everything which is under the NavBar to be blurred. How could I archive this?

Julian Veerkamp

Posted Sep 09 - Read on Facebook

Hey everyone.
I'm struggling with adding a blur effect to a NavBar in my Prototype. I know how to get a simple Scroll Component(Just an Image) blurred behind the NavBar. But my Prototype consists of 2 other layers which are moved, when the ScrollComponent is moved.
I created a rough, simple concept. http://share.framerjs.com/hd8cgibiu1kp/
Basically I want everything which is under the NavBar to be blurred. How could I archive this?

13 Comments

Julian Veerkamp

Okay, I solved this now using the layer.copy() function, why didn't I think about this before? Now I only have a problem with this border around the blurred content(the layer is not completely blurred, like the background blur effect in Sketch..) http://share.framerjs.com/wj29ug5cvdxc/

Koen Bok

Yeah this actually what you'd expect because the blur runs out of pixels near the edges. You should increase the scale of the blurred object so that edge overlap == blur radius.

Koen Bok

If you study Apple's blur, you can see they do tricks like this too.

Julian Veerkamp

Ah, okay. Thanks, I'll try that.

Fabian Buijing

fixed the circle by adding "clip: false" http://share.framerjs.com/w1l7ujkav3iv/

Julian Veerkamp

Fabian Buijing, what's the difference between clip:false and clip:true? I can't see a visual difference.

Fabian Buijing

in Chrome I got these hard edges

Julian Veerkamp

Okay, Good to know. In Safari it displays just fine, though.

Edward Sanchez

Actually CoreAnimation extends the pixels of the blur to the edges, so it's not scaled. Not sure if webkit supports it.

Kevyn Arnott

Edward Sanchez https://webkit.org/blog/3632/introducing-backdrop-filters/

Edward Sanchez

Kevyn Arnott Yeah, layer.style: '-webkit-backdrop-filter': 'blur(50px)'
Works on an old file of mine but not a new one, weird.

Kevyn Arnott

Yeah, it's kinda fussy and sadly only works in Safari. I've had good consistency with it when the background color is written in rgba like "rgba(255,255,255,.8)"

Jordan Robert Dobson

Yep this 👆🏼

Read the entire post on Facebook