Jump to content
Search Community

Parallax scrolling not working on pinned element

Praneet Dixit test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I have a simple setup in which an element (`main`) is getting pinned, then an animation runs on its child. The pinned container has a background image which has `background-attachment: fixed`. However, this property seems to have no effect.

If I remove just the `pin` property, everything works fine. How can I solve this issue?

See the Pen ZExQNaV by PraneetDixit (@PraneetDixit) on CodePen

Link to comment
Share on other sites

  • Solution

That's because browsers (at least some) will act totally different if there is any transform on the element or if you set will-change: transform. See for yourself - remove GSAP completely from the equation and set will-change: transform on your element and you'll see that the background won't be fixed-position. Apparently it creates a new stacking context or something and that messes things up. 

 

I generally try to avoid background-image in situations like this because they usually don't perform as well and there's weird issues like what you ran into. Instead, I'd create a regular <img> or another <div> with that as the background-image, but then you animate the transforms of that element to get the appearance of a fixed-position background, like this: 

See the Pen xxWOgRG?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

 

Thanks for the minimal demo, by the way! It was an excellent isolated test case. I wish all forums posters were as thoughtful. 👍

  • Like 1
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.
×
×
  • Create New...