Backdrop Filter blur not working with rotating elements

[Giustotech]

Hello everyone,
basically I'm trying to create a glassmorphism card that appears while scrolling, as you can see in the code pen there is a circle, when you scroll the card show with a rotating animation, the problem is that during the animation the backdrop blur effect doesnt work but it works only when the animation finish

What I've tried:
-removing autoAlpha: 0

-adding position relative instead of static to make z-index work

-adding backdropFilter to gsap animation

 

any kind of help would be awesome thank you all!

See the Pen PoLdvNa by Giusto-the-typescripter (@Giusto-the-typescripter) on CodePen.

[Rodrigo]

Hi @Giustotech and welcome to the GSAP Forums!

 

I'm far from being an expert in CSS filters, normally I stay away from filters because they're expensive and I'm a performance freak ?‍?

 

But this seems to work the way you expect:

See the Pen eYXLqNL by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Giustotech]

On 2/9/2024 at 7:24 PM, Rodrigo said:

Hi @Giustotech and welcome to the GSAP Forums!

 

I'm far from being an expert in CSS filters, normally I stay away from filters because they're expensive and I'm a performance freak ?‍?

 

But this seems to work the way you expect:

 

 

 

Hopefully this helps.

Happy Tweening!

This community is the best and so are you! Thank you a lot I couldn't figure out how to fix it!! Thank you for your time and your help!