@prefix : <http://schema.org/>.

<https://greensock.com/#organization> a :Organization;
  :mainEntityOfPage <https://greensock.com/>;
  :name "GreenSock";
  :url <https://greensock.com/>.

<https://greensock.com/#website> a :WebSite;
  :inLanguage [];
  :mainEntityOfPage <https://greensock.com/>;
  :name "GreenSock";
  :potentialAction [];
  :publisher "https://greensock.com/#organization";
  :url <https://greensock.com/>.

<https://greensock.com/forums/>
  :name "Forums".

<https://greensock.com/forums/forum/11-gsap/>
  :name "GSAP".

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/> a :QAPage;
  :author [];
  :dateCreated "2021-11-10T22:07:10+0000"^^:Date;
  :dateModified "2021-11-11T19:52:17+0000"^^:Date;
  :datePublished "2021-11-10T22:07:10+0000"^^:Date;
  :headline "Pinning and flexbox";
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>;
  :interactionStatistic[],[],[];
  :mainEntity [];
  :name "Pinning and flexbox";
  :publisher [];
  :text "Hey GreenSocks!\n \n\n\n	 \n \n\n\n	I have a wrapper with two elements in a row with flexbox. On widescreen one should be pinned while the other scrolls. This works.\n \n\n\n	 \n \n\n\n	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.\n \n\n\n	Without any JS this layout works as expected.\n \n\n\n	 \n \n\n\n	But together with the scrollTrigger something goes wrong with the heights on smaller screens.\n \n\n\n	 \n \n\n\n	Do I have to take care about something with flex, order and scrolltrigger? Or are there simply some heights missing.\n \n\n\n	 \n \n\n\n	Thanks!\n \n\n&#13;\n&#13;\n&#13;\nSee the Pen zYdLwbw by hightwo (@hightwo) on CodePen &#13;\n&#13;\n";
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/>.

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150026> a :Answer;
  :author [];
  :dateCreated "2021-11-10T23:54:27+0000"^^:Date;
  :text "If you only want that pinning to occur at 800px wide and above, just use ScrollTrigger.matchMedia(): \n \n\n\n	\n&#13;\n&#13;\n&#13;\n See the Pen zYdLdyO?editors=0010 by GreenSock (@GreenSock) on CodePen &#13;\n&#13;\n\n\n";
  :upvoteCount 0;
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150026>.

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150043> a :Answer;
  :author [];
  :dateCreated "2021-11-11T08:57:29+0000"^^:Date;
  :text "Thanks for the quick reply, Jack!\n \n\n\n	 \n \n\n\n	No, it the fixedElement should be pinned on any width. So I don't think matchMedia helps.\n \n\n\n	Simply the flex-layout should be switched on smaller widths.\n \n\n\n	 \n \n\n\n	I updated the pen. There's now a second element .wrapperNoScrollTrigger below (which is not targeted by the scrollTrigger).\n \n\n\n	 \n \n\n\n	Here the two flexboxes switch position as expected and the one I aim to pin sits on its correct position.\n \n\n\n	However I can't figure out, why the ScrollTrigger does not work correctly... it doesn't look that complex to me.\n \n\n\n	(Well honestly I assume that it does work correctly  but that there's an issue with the layout)\n \n\n\n	 \n \n\n\n	\n&#13;\n&#13;\n&#13;\n See the Pen YzxjjzO by hightwo (@hightwo) on CodePen &#13;\n&#13;\n\n\n\n\n	 \n \n\n\n	Thanks!\n \n";
  :upvoteCount 0;
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150043>.

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150048> a :Answer;
  :author [];
  :dateCreated "2021-11-11T11:41:36+0000"^^:Date;
  :text "Hey there!\n \n\n\n	 \n \n\n\n	I don't really understand what you're trying to achieve on mobile here.  \n	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.  \n	Seems to me that you need different logic for desktop and mobile - which you can do with matchMedia.  \n	Happy to help if you can explain what you're trying to do on mobile!\n \n\n\n	 \n \n";
  :upvoteCount 0;
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150048>.

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150096> a :Answer;
  :author [];
  :dateCreated "2021-11-11T18:58:42+0000"^^:Date;
  :text "Hi Cassie,\n \n\n\n	 \n \n\n\n	thanks for your reply! Does my drawing here explain better?\n \n\n\n	 \n \n\n\n	  \n	With the media query I just change flex-direction and place the green box on top.\n \n\n\n	The red div is always the trigger, and the green div is always pinned.\n \n\n\n	Start: \"top top\" and end: \" bottom bottom\" also remains the same.\n \n\n\n	 \n \n\n\n	So in my opinion the Scrolltrigger should work the same way on both... \n \n";
  :upvoteCount 0;
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150096>.

<https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150100> a :Answer;
  :author [];
  :dateCreated "2021-11-11T19:52:17+0000"^^:Date;
  :text "Works like a charm! 🤘  \n	Thanks for the CSS and the explanation. Gives me a little bit more understanding of how ScrollTrigger works.\n \n";
  :upvoteCount 0;
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150100>.

[ a :Person;

].

[
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>
].

[
  :name "hightwo"
].

[
  :url <https://greensock.com/profile/93548-hightwo/>
].

[ a :InteractionCounter;

].

[
  :interactionType "http://schema.org/ViewAction"
].

[
  :userInteractionCount 596
].

[ a :Person;

].

[
  :image <https://greensock.com/uploads/monthly_2021_03/Tg1ejFaL_400x400.thumb.jpeg.117393a5b391e6a52ea6ef5cdd26fc9a.jpeg>
].

[
  :name "Cassie"
].

[
  :url <https://greensock.com/profile/73103-cassie/>
].

[ a :Person;

].

[
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>
].

[
  :name "hightwo"
].

[
  :url <https://greensock.com/profile/93548-hightwo/>
].

[ a :Person;

].

[
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>
].

[
  :name "hightwo"
].

[
  :url <https://greensock.com/profile/93548-hightwo/>
].

[
  :member []
].

[ a :Person;

].

[
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>
].

[
  :name "hightwo"
].

[
  :url <https://greensock.com/profile/93548-hightwo/>
].

[ a :InteractionCounter;

].

[
  :interactionType "http://schema.org/CommentAction"
].

[
  :userInteractionCount 6
].

[ a :InteractionCounter;

].

[
  :interactionType "http://schema.org/FollowAction"
].

[
  :userInteractionCount 3
].

[ a :Question;

].

[
  :acceptedAnswer []
].

[
  :answerCount 6
].

[
  :author []
].

[
  :dateCreated "2021-11-10T22:07:10+0000"^^:Date
].

[
  :name "Pinning and flexbox"
].

[
  :suggestedAnswer <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150026>
].

[
  :suggestedAnswer <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150043>
].

[
  :suggestedAnswer <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150048>
].

[
  :suggestedAnswer <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150096>
].

[
  :suggestedAnswer <https://greensock.com/forums/topic/30060-pinning-and-flexbox/#comment-150100>
].

[
  :text "Hey GreenSocks!\n \n\n\n	 \n \n\n\n	I have a wrapper with two elements in a row with flexbox. On widescreen one should be pinned while the other scrolls. This works.\n \n\n\n	 \n \n\n\n	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.\n \n\n\n	Without any JS this layout works as expected.\n \n\n\n	 \n \n\n\n	But together with the scrollTrigger something goes wrong with the heights on smaller screens.\n \n\n\n	 \n \n\n\n	Do I have to take care about something with flex, order and scrolltrigger? Or are there simply some heights missing.\n \n\n\n	 \n \n\n\n	Thanks!\n \n\n&#13;\n&#13;\n&#13;\nSee the Pen zYdLwbw by hightwo (@hightwo) on CodePen &#13;\n&#13;\n"
].

[ a :Answer;

].

[
  :author []
].

[
  :dateCreated "2021-11-11T19:32:29+0000"^^:Date
].

[
  :text "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: \n \n\n.pin-spacer {\n  flex-basis: auto !important;\n  order: -1;\n}\n\n\n	Does that help? \n \n"
].

[
  :upvoteCount 0
].

[
  :url <https://greensock.com/forums/topic/30060-pinning-and-flexbox/?do=findComment&comment=150097>
].

[ a :Person;

].

[
  :image <https://greensock.com/uploads/monthly_2019_05/avatar-jack.thumb.gif.70769a4b3709c9ceb42e42735bbb0880.gif>
].

[
  :name "GreenSock"
].

[
  :url <https://greensock.com/profile/1-greensock/>
].

[ a :Person;

].

[
  :name "hightwo"
].

[ a :Person;

].

[
  :image <https://greensock.com/uploads/monthly_2019_05/avatar-jack.thumb.gif.70769a4b3709c9ceb42e42735bbb0880.gif>
].

[
  :name "GreenSock"
].

[
  :url <https://greensock.com/profile/1-greensock/>
].

[ a :Person;

].

[
  :image <https://greensock.com/applications/core/interface/email/default_photo.png>
].

[
  :name "hightwo"
].

[
  :url <https://greensock.com/profile/93548-hightwo/>
].

[ a :Language;

].

[
  :alternateName "en-US"
].

[
  :name "English (USA)"
].

[ a :SearchAction;

].

[
  :query-input "required name=query"
].

[ a :BreadcrumbList;

].

[
  :itemListElement []
].

[
  :itemListElement []
].

[ a :ListItem;

].

[
  :item <https://greensock.com/forums/>
].

[
  :position 1
].