Jump to content
Search Community

Translating a scrolltrigger pin

Moritz Profitlich test

By Moritz Profitlich
in GSAP

Moderator Tag
 Share
Go to solution Solved by akapowl,

Recommended Posts

Moritz Profitlich test

Moritz Profitlich

Posted
Posted

Hello

 

This questions comes with two demos.

 

I have a page with projects in sections. Their headings are pinned with scrolltrigger. This works well:

 

Now, at a click of a button, the whole content should be moved to the right. New content is moved in from the left. The content on the right (the one with scrolltrigger pins) gets position: fixed while staying at its position, the content that came from the left can be scrolled. Please note: Later, another click will scroll stage 1 back in (I did not program that in the demo).

See the Pen wvQeWoM by mprofitl (@mprofitl) on CodePen

 

For a real life example see https://staging.studiocarch.ch/. Klick any project, it will then move in from the right (opposite direction than the demo).

 

GSAP makes scrolltrigger pins position: fixed. Therefore I cannot move the projects with gsap.to left. The projects move but the pinned headings stay at their place (they just become wider). The demo at the end shows that when clicking the "pan projects" button.

 

I have two questions:

  1. How to move stage 1 with pinned content?
  2. How to keep all the content of stage 1, including the pinned content, at their positions while the whole stage 1 is fixed?

 

I thought of one approach. Would it be possible to make all content of stage 1 positioned absolutely at their current positions while deactivating scrolltrigger pins? And would be then possible reactivate scrolltrigger without any content jumping?

 

Just for info: I will use Barba.js to load content onto stage 1. My question however is not Barba related.

 

Thanks a lot for your thoughts.

See the Pen JjeNgpG by mprofitl (@mprofitl) on CodePen

Link to comment
Share on other sites
  • Solution
akapowl test

akapowl

Posted
  • Solution
Posted

 

Hello there, Moritz.

 

I think the biggest issue in all this is caused by the fact that position 'fixed' in elements that have a parent with transforms applied (which you will get when tweening the content to the side) will change its context to that parent - that is just how browsers work. 


ScrollTrigger has a pinType setting, that you'll probably want to set to 'transform' to accomodate to scenarios that would be tricky because of that.

 

This here is from the docs:
 

pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). 


 

I'm not sure I understand that second part of your question, and I don't have the time to dig into your example, but as far as I think I understand it, it might be mostly about adjusting the layout/setup to work with what you have in mind - and of course the accompanying JS logic and browser limitations - and not much related to GSAP in the first place.

On that website you linked, it appears that they are using multiple elements that can be scrolled for the left and right part - the scrollbar changes when clicking one of the nav-items - so you might want to e.g. set overflow to hidden on one scrollable element and overflow to scroll on the other when changing views.

When using  specific scrollable elements other than the body, you'll want to have a look at ScrollTriggers scroller property.
 

scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

 

These properties should help getting you closer to what you have in mind. I hope this will help.

  • Like 3
Link to comment
Share on other sites
Moritz Profitlich test

Moritz Profitlich

Posted
  • Author
Posted

Thank you, akapowl, for your help

 

Setting the pinType to transform made it possible to move the stage (the div the with the scrolltriggers in it) aside.

 

The website I sent a link to, by the way, was made in our office. Only the active stage is scrollable, with the body’s normal scrollbar. That’s why I asked how to freeze the scrolltriggered headings while the whole stage is moved aside. I realised however that I do not need this as all headings should be made invisible anyway.

 

Splendid, it’s solved. Thank you!

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...