Jump to content
Search Community

Layered pinning and sticky/pinned column issue

NoMore321 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

 

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

 

  • Like 3
Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 3
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...