acolyte

This is exactly what I am looking for! I'll try to use this as a foundation for my main layout. Thank you very much. I hope I was not too much of a burden.

Also, I have updated the CodePen to use pinnedContainer with its parent pinned panel but this doesn't seem to solve my issue.

Hi Cassie, thank you for your response! My bad, i was trying to use the search input. I guess it just searches in the title.

Good morning Jack, The page's main content will be in the first white section. Its height needs to be fluid as it may contain many elements. The first goal is to reveal the following pinned panels (blue then black) just like this pen. Here's an inspiration (see the footer at the bottom). https://codepen.io/GreenSock/pen/BaowPwo I also plan on animating different elements inside the main section using ScrollTrigger (like this data-fade). It may be because I am a newbie to GSAP, but i find the ScrollTrigger's doc to be somewhat lacking. I find no referrence to this pinnedContainer you are referring. I found it mentionned in the Cheatsheet, but without explaination on what it does exactly. Thank you for your time.

Hello there, I'm trying to add Scrolltriggers inside the first of three pinned panels that is longuer than the viewport. Unfortunately, it seems that the further the element is from the top of the pannel, the greater the trigger's offset is. I tried playing with the order of my animations, using refresh() and sort(). No luck. In this CodePen, there are multiple text elements with the same selector. If you remove the JS for the pinned panels (and edit some css), the triggers work as intended. Does anyone have an idea how to properly assign the triggers inside these panels?