hightwo Posted November 10, 2021 Share Posted November 10, 2021 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.  Thanks! See the Pen zYdLwbw by hightwo (@hightwo) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2021 Share Posted November 10, 2021 If you only want that pinning to occur at 800px wide and above, just use ScrollTrigger.matchMedia():Â See the Pen zYdLdyO?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
hightwo Posted November 11, 2021 Author Share Posted November 11, 2021 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  Thanks! Link to comment Share on other sites More sharing options...
Cassie Posted November 11, 2021 Share Posted November 11, 2021 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! 1 Link to comment Share on other sites More sharing options...
hightwo Posted November 11, 2021 Author Share Posted November 11, 2021 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 More sharing options...
Solution GreenSock Posted November 11, 2021 Solution Share Posted November 11, 2021 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? 1 1 Link to comment Share on other sites More sharing options...
hightwo Posted November 11, 2021 Author Share Posted November 11, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now