Jump to content
Search Community

Troubles with GSAP Scroll Trigger labelToScroll.

SDCO Development test
Moderator Tag

Go to solution Solved by SDCO Development,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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


Link to comment
Share on other sites

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!

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...