Layered pinning and sticky/pinned column issue

[NoMore321 6 Likes (Newbie)]

Hey guys!

 

I'm having difficulty making a column sticky within the 'layered pinning with variable height' demo you guys created. I've forked the pen and added columns.

 

Obviously position: sticky with a top value does nothing, but I'm surprised that I can't easily pin the column either. I've tried a variety of triggers and start and end points. Some assistance would be greatly appreciated!

 

(The right-hand column should only be pinned to the end of the left-hand column)

 

 

See the Pen 7e8402b1bae38bd08128c8e84630e3a3 by brynb (@brynb) on CodePen

[akapowl 5,215 Likes (Superhero)]

 

Hello Bryn.

 

8 hours ago, BrynWithin said:

I'm surprised that I can't easily pin the column either.

 

The panels in this example do not scroll natively; instead they are being translated upwards by the ScrollTriggers set up forEach panel.

 

  panels.forEach((panel, i) => {
    if(i !== panels.length - 1) {
      gsap.to(panel, {
        yPercent: -100, // <-- see
        ease: "none",
        scrollTrigger: {
          start: heightSoFar,
          end: heightSoFar + panel.offsetHeight,
          scrub: true,
        }
      });
    }

    heightSoFar += panel.offsetHeight;
  });

 

ScrollTrigger will use position: fixed for pinning by default, when the body is the scroller - which it is here. So you are basically trying to use position: fixed in a parent with transforms on it, which won't work as you might expect, because those transforms change the context of the 'fixing' to that parent then. Thus you will want to change the pinType to 'transform'. I would also suggest not to use pinSpacing: true here, as you don't seem to need it in this case, and it will throw things off - likely because the parent of the element is a flex-container.

 

You can read more about pinType and pinSpacing in the ScrollTrigger docs.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

You should probably also stick the creation of that seperate ScrollTrigger into the sizePanels() function to begin with, because on refreshInit all ScrollTriggers will get killed and only those in that function are being recreated in that example. So in your demo that ST you set up at the top will get killed when ScrollTrigger does its refresh on page load and then never created again and thus will not work at all.

 

// see:

ScrollTrigger.addEventListener("refreshInit", () => {
  // Kill off old ones
  ScrollTrigger.getAll().forEach(ST => ST.kill());
  
  // Create new ones
  sizePanels();
});

 

Last but not least, it would be very helpful, if you could make your codepens forkable (by not setting them to private) in future; so the people helping here wo't have to re-create your example from scratch and have one less step to help you; which I hope this does. Happy tweening.

 

See the Pen ExexzgO by akapowl (@akapowl) on CodePen

 

[akapowl 5,215 Likes (Superhero)]

 

Also as a heads up it is worth mentioning, that this will obviously only work for the first panel with simple instructions for start and end like 'top top' e.g., because of how that example is set up to be working with all panels positioned absolute; and thus all actually already being at that point when their top hits the top of the viewport.

 

So if you were to set up ScrollTriggers for panels further down the line, you would need to properly calculate their starts and ends based on the calculations made for the ScrollTriggers in the forEach loop - which is where it would probably be good to set up any other ScrollTriggers, too, then.

 

I added another ScrollTrigger for the orange panel in this other demo; just to give you an idea of what I mean by that.

 

See the Pen bGxGPEK by akapowl (@akapowl) on CodePen

 

[NoMore321 6 Likes (Newbie)]

@akapowl Wow, the help on this forum is absurdly good! A million thanks to you sir! Your second pen is perfect for targeting specific columns down the page!

 

Apologies for the private pen! I'll bear that in mind in the future.