Browser performance for animation backdrop-filter

[nadjakoroleva]

Hi there,

 

we have tags in a navigation bar. Each of tags has a backdrop-filter: blur(6px). On click on the tag we want to move a nav container with tags to the left. And here we have a problem. Until our animation is over backdrop-filter property doesn't work. When the animation has ended, backdrop-filter property does work again. As I understood it comes from performance issue of browser. Does GSAP have plugins or smth to solve it?

 

Thank you,

Nadja

[elegantseagulls]

Hi @nadjakoroleva,

 

Browser support for backdrop-filter is super new, so it's going to be a bit buggy animating, however, it may be worth trying to put a translateZ: 0px, or backface-visibility: hidden, or will-change: transform, or something to force hardware acceleration. That said, it still may be tricky to make happen. Good luck and let us know if you have success!