Position sticky panels with ScrollToPlugin and ScrollTrigger issues

[aok]

I'm using `position: sticky` for some nice CSS only layered scrolling but I need to add in some scrollTo for some navigation. Unfortunately as you can see from the demo that the `scroll to` only works one way (it doesn't scroll you to the sections if you've passed them), I'm guessing how scrollToPlugin is getting the position to scroll to with the layered scrolling. Is there any way to use scrollToPlugin with this?

 

My intention is also to use ScrollTrigger for some active nav items BUT sometimes the start and end of the triggers are random off (if I scroll down then refresh etc) so I'm wondering if the position sticky is messing things up also.

 

Any advice is appreciated.

See the Pen wvZVbqG by richardcool (@richardcool) on CodePen

[Rodrigo]

Just don't use position sticky and use ScrollTrigger to create the layering effect:

See the Pen XWOJGVV by GreenSock (@GreenSock) on CodePen

 

Here are a couple of demos that buttons:

See the Pen WNzQJMO by GreenSock (@GreenSock) on CodePen

 

See the Pen GRMGPBz by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[aok]

Thanks for the help @Rodrigo – I've updated my original CodePen now.



I used one of the examples to pin the sections for the same desired effect and then grab the trigger using ScrollTrigger.getById and getting the trigger.start position to use on the scrollTo. This works great however on one of the panels (the orange one in my demo), that is longer than 100% height of the viewport, it scrolls to the bottom. This is due to the start position on the scrollTrigger being set to the bottom.

start: () => section.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",

However, if I always set this to `"top top"` I can no longer scroll through the larger orange panel.

[Rodrigo]

Hi,

 

Maybe a different logic for every element that is not the first, instead of selecting the ScrollTrigger for the current element and using that start point, use the previous ScrollTrigger (if any) end point:

const menuLinks = gsap.utils.toArray("header ul li button");

menuLinks.forEach((elem, i) => {
  elem.addEventListener("click", function () {
    let target = elem.getAttribute("data-panel"),
        trigger = ScrollTrigger.getById(target);
    if (i > 0) {
      target = menuLinks[i - 1].getAttribute("data-panel");
      trigger = ScrollTrigger.getById(target);
    }

    gsap.to(window, {
      duration: 1,
      scrollTo: i > 0 ? trigger.end : trigger.start,
      overwrite: true
    });
  });
});

Hopefully this helps.

Happy Tweening!