Michael Pumo

I actually came up with a solution now. I will leave a CodePen here to illustrate what it was I was after and to help anyone is in a similar situation in future: https://codepen.io/michaelpumo/pen/MWbJgzB As you can see, if you open the console, you now get events when entering or leaving each list (each lists consists of 2 items). The recalculation of start and end points also allows for the desired visual effect I was after, where there isn't a huge gap below left from the natural heights of the lists.

Thank you for this, it's definitely the visual effect I'm after. However, the problem is, I want to be able to use onEnter(), onLeave() etc for each list. Without a natural height, I'm not sure how to do this as everything simply collapses. In your demo this additional ScrollTrigger timeline for each list isn't present. I need these hooks in order to run some other code in the future (the demo is just a stripped down, simple version to demonstrate the concept). So when item 1 and 2 pass (in list 1) I want to fire a onLeave() hook and then when item 3 and 4 pass in list 2 I want to fire its own onLeave() hooks as well. I'm not sure if I even have the right approach? Perhaps there's a better way of doing what I'm after? Thanks

But in your example, the heights of the 2 lists still stack to create a huge space after the wrapper has finished pinning. It's the same issue as me but they're just a little smaller in height. I could make them zero height or absolutely position them, but the reason I can't is that I need the scroll trigger points for each list.

The blue outlined areas are the unordered lists within the pinned div that wraps everything: &__list { width: 100%; height: calc(100vh - 100px); outline: 5px solid skyblue; outline-offset: -5px; margin: 0; padding: 0; } They have a height of 100vh - 100px (to account for the navigation being 100px high). This height allows me to apply a ScrollTrigger on them: lists.forEach((list, index) => { const items = list.querySelectorAll('.c-flyway__item'); const itemsTl = gsap.timeline({ scrollTrigger:{ id: `List ${index}`, trigger: list, start: "top top", end: "bottom top", scrub: true, markers: true } }); items.forEach(item => { gsap.set(item, { opacity: 0 }); itemsTl.to(item, { opacity: 1 }); itemsTl.to(item, { opacity: 0 }); }); tl.add(itemsTl); }); Within each lists timeline/scrolltrigger I loop the list items and add them into this timeline with a fade in and out. However, each list item is position: absolute; because I wanted them all stacked on top of one another in the same place. That, unfortunately means that the lists occupy an area/space below that (visuallly) is not desirable - because the fading in and out has now complete. There might be a better way to achieve a crossfade effect between all items but I couldn't think of one.

Yes, the moment just after the "pinning" ends, is the moment that the next set of content that says "scroll up" should appear. But at present, the blue outlined lists occupy that area. I'm in need of a way to remove the space they occupy yet at the same time obtain their dimensions so that the ScrollTrigger on them works correctly. Hope this helps? I'm not sure how to make this clearer but let me know if anything else needs clarifying? The effect I want is almost there, I just ideally want to remove the lists heights that are pushing everything further down after the images have tweened and the pinning is done.

Hi Zach My example shows the areas that are taking up space; see the light blue outlines. These are the outlines on each "list" that has its own ScrollTrigger applied. I cannot simply position absolute these lists as the heights would collapse and so the start and end points would not work. At the same time, I'm not wanting them to take up that space. Is there a better way to achieve what I'm after? I need each item to sit directly on top of one another in the same spot so that they can crossfade but I also need the natural heights of the lists in the HTML so that the ScrollTriggers will work. Does this all make sense? Thanks

Hello! New Club GreenSock member here, so go easy ? I have a situation where I want a whole section of unordered lists to be pinned and then for each list to cycle through its own scrollTriggers so that I can fire events for when they enter and leave. This section also includes a navigation (does nothing for this demo). The scrollTriggers are working as expected, except for the fact that by absolutely positioning these list elements, it causes the pin feature to leave that space below for each list. I need to absolutely position the list items because I need cross-fading. I also need to have each list with its own scrollTrigger as I'll use each list to fire some events for entering and leaving. You can see from my CodePen above that when you enter the the bottom area, the lists are taking up the space. Ideally I would like for this not to be happening. I left the "natural" height for these in place in order to get the triggers. Any ideas on this? I tried: pinSpacing: false ...but that doesn't yield the results I need. Many thanks for your help!