background-attachment:fixed not work with scrolltrigger

[Jacky Yang 4 Likes (Newbie)]

Hello Teams, here's me again😝. I want to use css "background-attachment: fixed" to style ".sec-1"(with blue background) and I found that the ".sec-3" scrollTrigger effect cause the "background-attachment: fixed" not work(comment out the sec-3 js code will work). How to fix that? Thanks!

See the Pen NWMvLeL?editors=1010 by jackyyang (@jackyyang) on CodePen

[akapowl 5,215 Likes (Superhero)]

Hello Jacky.

 

That is the case because you are later pinning the .wrapper that contains everything, so for the pinning to work reliably it gets quite some properties applied - amongst those are transforms that are being set to 0px on X and Y.  And position or background-attachment fixed on elements that have an ancestor with transform applied, don't work the way they 'usually' do because the context changes.

One way you could ommit that from happening is to set transform to none !important on the .wrapper yourself via CSS - although I'm not sure if if this really is recommendable as I don't know if or in what way this might interfere with ScrollTrigger's pinning later on, or in other scenarios.

Other than that you will probably have to find a different styling / layout solution for your elements, working around not being able to use fixed position or background-attachment in this scenario.

 

See the Pen rNvzXoX by akapowl (@akapowl) on CodePen

 

[Jacky Yang 4 Likes (Newbie)]

Hi, akapowl , transform: none make the other scrolltrigger content of my page break, is there any other "scrolltrigger way" to make background fixed again ? Thanks!

[akapowl 5,215 Likes (Superhero)]

 

6 hours ago, Jacky Yang said:

is there any other "scrolltrigger way" to make background fixed again

 

Not that I know of at least; but maybe somebody else knows better.

 

What you could also do is just take that section with the fixed background out of your .wrapper - since the pin starts 'top top' of the next section anyway, you wouldn't notice any visible difference with regard to the pinning.

 

See the Pen ExLwmYj by akapowl (@akapowl) on CodePen

 

[Jacky Yang 4 Likes (Newbie)]

Hi, akapowl, I use BackgroundSizePlugin to make different effect at last. Anyway, your solution works for me, Thanks !