[Troubles with GSAP Scroll Trigger labelToScroll.]

Well, I figured it out. 

 

I determined that my animation was only 0.51 seconds, so I solved it by recalculating the label positions: 

 

let position = (index / (variantBtns.length - 1)) * variantAnim.duration();

variantAnim.addLabel(`label${index}`, position);

btn.addEventListener('click', (e, i) => {
  let index = Array.from(variantBtns).indexOf(e.target);
  gsap.to(window, {
    scrollTo: variantAnim.scrollTrigger.labelToScroll("label".concat(index))
  });
  console.log(index);
});

 

[Troubles with GSAP Scroll Trigger labelToScroll.]

Hi there, 

I am really struggling to figure out why this isn't working.... and it's so close I do not want to give up on it.

 

For some reason anytime I tween to 0.5 in the timeline it completely skips over it and goes to 1. This happens when I manually set the value to 0.5 - Even without Labels it refuses to work. I have 3 buttons, so I want them to trigger to 0, 0.5, and 1. Console logging the progress confirms this is where the 2nd button should go. However, it goes to 1 no matter what? Is it rounding up?

 

Testing with 0, 0.33, 0.66 works but that is not the correct position.

 

Thanks in advance for any suggestions. 

 

 

See the Pen KKYqXbR by hunterruth (@hunterruth) on CodePen