Jump to content
Search Community

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

Michael Pumo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

2 minutes ago, Michael Pumo said:

Hope this helps?

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

 

3 minutes ago, Michael Pumo said:

I'm not sure how to make this clearer but let me know if anything else needs clarifying?

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

13 hours ago, Michael Pumo said:

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.

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):

See the Pen mdOOZax?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're wanting? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

There are again multiple ways to handle that sort of thing. You could take what I made, create additional ScrollTriggers for each of your sections that use calculated start and end values based on how tall each section is, and add callbacks to those. Or you could do just the pinning like I am but move the animation to new ScrollTriggers and add callbacks to those.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...