[I have an issue with Pin spacing when absolutely positioning elements.]

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:

 

See the Pen MWbJgzB by michaelpumo (@michaelpumo) on CodePen

 

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.

[I have an issue with Pin spacing when absolutely positioning elements.]

9 minutes ago, ZachSaucier said:

In my demo, the timeline is finished animating exactly when the salmon section reaches the bottom of the container. So you're wanting them to overlap then? 

 

Or I guess you could be wanting to have the salmon section be pinned as well, in which case it should be moved to inside of the container that you pin. Here's one way of setting that up (there are many variations):

 

 

 

Is that what you're wanting? 

 

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

[I have an issue with Pin spacing when absolutely positioning elements.]

19 minutes ago, ZachSaucier said:

If you want each section to be the height of the content, wouldn't setting the height to 300px instead of 100vh - 100px be what you want to use? 

 

 

 

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.

 

[I have an issue with Pin spacing when absolutely positioning elements.]

23 minutes ago, ZachSaucier said:

Sorry, still not clear on which space you want to get rid of.

 

As I said, if you colored the section you want to get rid of a certain color that would help. A screen shot with annotations might also work. Or a video where you point out which section you're trying to get rid of would help.

 

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.

 

 

[I have an issue with Pin spacing when absolutely positioning elements.]

9 minutes ago, ZachSaucier said:

Sorry, but I still don't get it.

 

Are you wanting all of the space in the light blue to go away? The space after the images stop appearing to the bottom of the light blue area? The space after the light blue area? Something else?

 

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.

[I have an issue with Pin spacing when absolutely positioning elements.]

2 minutes ago, ZachSaucier said:

Hey Michael and welcome to the GreenSock forums. 

 

What space are you trying to get rid of? Perhaps it'd help if you colored it a certain color so that we can understand exactly what you're trying to get rid of. A screen shot with annotations might also work.

 

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

[I have an issue with Pin spacing when absolutely positioning elements.]

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!

See the Pen NWbbjzw by michaelpumo (@michaelpumo) on CodePen