Troubles with GSAP Scroll Trigger labelToScroll.

[SDCO Development]

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

[SDCO Development]

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);
});

 

[Rodrigo]

Hi @SDCO Development and welcome to the GSAP Forums!

 

Is great to hear that you were able to fix the problem! Just a minor clarification, if you don't want any snapping in ScrollTrigger just omit the snap configuration option, no need to pass snap: false in your config:

let variantAnim = gsap.timeline({
  scrollTrigger: {
    trigger: hero,
    start: "top top+=95px",
    pin: true, 
    duration: 1,
    scrub: true,
    pinSpacing: true,
    markers: true,
  }
})

Finally thanks for being a GSAP Club member and supporting GSAP!

 

Happy Tweening!