Jump to content


Pinning and flexbox

Go to solution Solved by GreenSock,

Recommended Posts

Hey GreenSocks!


I have a wrapper with two elements in a row with flexbox. On widescreen one should be pinned while the other scrolls. This works.


On smaller screens flex-direction: column is set on the wrapper and order: -1 for the fixedElement, because this should always be the upper one.

Without any JS this layout works as expected.


But together with the scrollTrigger something goes wrong with the heights on smaller screens.


Do I have to take care about something with flex, order and scrolltrigger? Or are there simply some heights missing.



See the Pen zYdLwbw by hightwo (@hightwo) on CodePen

Link to comment
Share on other sites

Thanks for the quick reply, Jack!


No, it the fixedElement should be pinned on any width. So I don't think matchMedia helps.

Simply the flex-layout should be switched on smaller widths.


I updated the pen. There's now a second element .wrapperNoScrollTrigger below (which is not targeted by the scrollTrigger).


Here the two flexboxes switch position as expected and the one I aim to pin sits on its correct position.

However I can't figure out, why the ScrollTrigger does not work correctly... it doesn't look that complex to me.

(Well honestly I assume that it does work correctly ;-) but that there's an issue with the layout)


See the Pen YzxjjzO by hightwo (@hightwo) on CodePen



Link to comment
Share on other sites

Hey there!


I don't really understand what you're trying to achieve on mobile here.

You're starting the pin before the image that you're pinning is even in the viewport. The trigger is at the top here and the element you're pinning is further off the page.

Seems to me that you need different logic for desktop and mobile - which you can do with matchMedia.

Happy to help if you can explain what you're trying to do on mobile!

Screenshot 2021-11-11 at 11.39.01.png

  • Like 1
Link to comment
Share on other sites

Hi Cassie,


thanks for your reply! Does my drawing here explain better?



With the media query I just change flex-direction and place the green box on top.

The red div is always the trigger, and the green div is always pinned.

Start: "top top" and end: " bottom bottom" also remains the same.


So in my opinion the Scrolltrigger should work the same way on both... 

Link to comment
Share on other sites

  • Solution

From what I can tell, the issue has to do with the fact that you're setting a non-standard order on the element that isn't getting applied to the pin-spacer and you've got CSS that's forcing the flex-basis of pin-spacer to a value that's making it collapse when the child content is set to position: fixed. I can apply some code to the next release of ScrollTrigger that overrides that but for now you can simply add this CSS to your media query: 

.pin-spacer {
  flex-basis: auto !important;
  order: -1;

Does that help? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Works like a charm! 🤘

Thanks for the CSS and the explanation. Gives me a little bit more understanding of how ScrollTrigger works.

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.