Scroll trigger pinned section with dynamic height based on content

[jacopotaba]

Hello, i need to do a multiple pinning sections that should have dynamic height based on the content inside. generally a section should have height from 500px to unknown because the content will be taken from the backend and can have 1 or 100 paragraphs. the problem is that if te content of the section if minor of 100vh it works, if it is more thank 100vh the section doesn't scroll. in the pen you will se only first 2 paragraphs and should be visible all of them.

i have tried also this solutions 

See the Pen gOMwveK by GreenSock (@GreenSock) on CodePen

 and the scroll in the longest section (more than 100vh) is working, but the pinning logic is not correct, i need pin from top to bottom.

See the Pen PoyzmKo by jacopotabani (@jacopotabani) on CodePen

[GreenSock]

Taken from the answer to your question in another thread: is this what you're looking for?: 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

[jacopotaba]

1 hour ago, GreenSock said:

Taken from the answer to your question in another thread: is this what you're looking for?: 

 

 

the scroll behavior is correct, but if for example the first section has a height lower than 100vh, it will not start from the top of the page. how can I start sections even with height less than 100vh from the top of the page? try put height:100px on first section @GreenSock .  The yellow section should start from top of the page, but the pin-spacer is making this space

 

[Rodrigo]

Hi,

 

Maybe using this achieves what you're looking for:

panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: () => (panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom"), 
    pin: true, 
    pinSpacing: false 
  });
});

Basically check where each panel should be pinned based on it's height and the window height.

 

Here is a live example (no snapping though):

See the Pen jOerKOb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, I think you meant: 

start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom"

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

[jacopotaba]

@GreenSock yes like this seems to work perfectly, thank you everybody!

[jacopotaba]

@GreenSock is there a way the make the pinned section have a dynamic height? suppose to ave an accordion, initially collapsed and you want to open it. if the accordion is at the bottom of the pinned section, will not be visible when expanded

 

[Cassie]

You may just need to call ScrollTrigger.refresh on resize? It would be great if you had a minimal demo to show us! Then we can understand the context and test a fix for you

[GreenSock]

Yep, if you'd like some help please make sure you provide a minimal demo that clearly shows the issue you're describing and we'd be happy to take a peek. I suspect Cassie is correct about you just needing to call ScrollTrigger.refresh() to re-calculate all the start/end values because you're shifting them around by resizing things.