Scrolltrigger pin section that is a trigger

[inzn]

I'm working on a page that has a intro which should go up, while the rest of the page stays pinned. So far so good. The pinned page has some ScrollTrigger animations though, which obviously don't work (because of it's pin I guess – without pinning it works). Demo here: https://codesandbox.io/p/sandbox/fancy-architecture-ddz5cn?file=%2Fcomponents%2Fabout.tsx%3A44%2C1 I'm wondering what a potential solution could be to this? Probably a rookie mistake, but so far none of the other forum solutions have helped.

 

And then the follow up question: When I split everything up in multiple components as I did now, how can I make sure ScrollTrigger refreshes and shows all the animations in the correct order etc. I now have ScrollTrigger.sort() and .refresh() in all the components, but I noticed that sometimes the spacing is not correct and some animations overlap. Is there a way to have a “final” ScrollTrigger.sort() and .refresh() in the parent component once all children are loaded?

 

Thanks in advance!

[Cassie]

Heya!

 

So 'pinning' inside previously pinned or currently pinned containers is a nightmare.

 

You can kinda bosh it with pinnedContainer and pinType transform 

See the Pen VwVorJJ?editors=1010 by GreenSock (@GreenSock) on CodePen

but you'd need to do some sort of scrollerproxy thing to get around the jank. Urk. Not worth the effort.

info from the docs on pinnedContainer

Quote

pinnedContainer    Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)

I would honestly just approach this differently and avoid nested pinning. Like so - 

See the Pen JjegMGV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

In terms of the second question, maybe refreshPriority would help here?

Quote

refreshPriority    number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

It's tricky because other frameworks offer callbacks for when the whole page is loaded, I'm not really sure what the appropriate way to do this with react is, I guess the rendering order goes parent > child. So you'd want to call sort on the children?

Hope this helps!

[inzn]

Hey @Cassie, thanks a lot for the helpful and insightful response!

 

I went with your suggestion to avoid nested pinning and wrote some (GSAP unrelated) logic to remove the section from my components if index = 0.

 

Regarding my second question, I noticed that my code always does

ScrollTrigger.refresh();

ScrollTrigger.sort();

 but when I reverse this to

ScrollTrigger.sort();

ScrollTrigger.refresh();

it seems to be working as expected.

[Cassie]

Ah yeah that would make sense, sort to get the order right and then refresh to get the correct calculations. ☺️

 

Glad I could help.