Jump to content
GreenSock

Jacky Yang

background-attachment:fixed not work with scrolltrigger

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
√ó