ScrollTrigger breaks when container have backdrop-filter: blur()

[Andreykch]

I need to add a pinned block into a container that has a backdrop filter blur. But I found that it breaks. Tell me is this a bug or I didn't see something in the documentation?

See the Pen gOZpgVB by andreykch (@andreykch) on CodePen

[mvaneijgen]

Just to note, I don't know a solution. I've marked the topic, so someone will be here shortly.

 

Chrome & Firefox on macOS, both have the issue. Safari has no issue. 

[Rodrigo]

Hi,

 

So the problem is not related to GSAP but to the fact that the filter property creates a problem with position fixed on child elements, which is what GSAP is normally doing for pinning:

https://stackoverflow.com/a/52937920/2456879

 

One option is to use transform for the pinType:

ScrollTrigger.create({
  trigger: ".block",
  start: "top top",
  pin: ".text",
  pinType: "transform",
  markers: true
});

Finally thanks for the super simple and easy to follow demo! 👍

 

Hopefully this helps.

Happy Tweening!

[Andreykch]

Thanks, it's work!
It was unexpected for me to find such a bug. I didn't expect filters could affect the positions of child elements