Dynamic start position of scrolltrigger pin depending on nav position

[thehaes]

Hey guys,

 

I have a pretty much working thing here, it's just I feel like I 'hacked' it and it could work better, as it's a little buggy.

Basically the structure is like this:

1) I have a nav bar with a toast message that's always pinned on top

2) under it there's a main menu which is being hidden/shown depending on the scroll direction

3) and lastly, I have a secondary menu which is further down the page. It's supposed to be pinned to the top when scrolling through content

 

The problem is that the menu is hiding/showing depending on scroll direction, which makes this a little bit more complicated to calculate when the secondary menu is supposed to pin. The way I did it here is to update the menu height and pass it to the scrolltrigger on update + refresh only this one scrolltrigger (for performance).

 

What I noticed it's acts strangely when I'm scrolling slowly, feels like it's not synced correctly and there are gaps between divs (I've put black background so you can see it better) and sometimes it looks like it's lagging behind to refresh. There's probably some better way to achieve this, I just don't know how.

See the Pen RweXMGZ by thehaes (@thehaes) on CodePen

[Rodrigo]

Hi,

 

I think  you  are overcomplicating this a bit. Why not use an onUpdate to just tween the element's Y position instead of refreshing the ScrollTrigger instance? That's basically what's causing the delay. The refresh method takes a few cycles to be completed after making all the calculations.

 

I would start by using a quickTo instance for the element, like this:

let menu = document.querySelector(".pin-menu");
const quickY = gsap.quickTo(menu, "y", { duration: 0.2, ease: "none", });
let pinCategories = ScrollTrigger.create({
  trigger: menu,
  start: () => "top " + headerHeight,
  endTrigger: ".content",
  end: "max+=10",
  pin: true,
  pinSpacing: false,
  markers: true,
  onUpdate: (self) => quickY(self.direction < 0 ? 0 : -nav.clientHeight),
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!