Run a function when the timeline scrubs across a label?

[DeltaFrog]

Howdy  all! 

 

Can I run a function with parameters when the user scrubs the play head over a label?   I have created some labels but could also leverage the progress times of 0.00, 0.33, 0.66 and 0.99.    

 

How do I get a label or time to call a function with different parameters?    Here are two examples of how I want to call the function:

 

changeColors("#9365F0", "white", "white", "white");

changeColors("white", "white", "white", "#9365F0");

 
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".centerMeHorz",
    start: "10% 30%",    // [trigger] [scroller] positions
    end: "6000px 10%", // [trigger] [scroller] positions
     markers: "true", // only during development!
    scrub: 1,
    onUpdate: (self) => console.log( self.progress.toFixed(2)  ),
    
    snap: {
      snapTo: 0.33,
      duration: 0.01,
      ease: "none"
    },

    

    pin: "#wrap"  //  use wrap for pinning everything in wordpress
  
    
  }
  
});


tl.addLabel("start", 0);

tl.addLabel("step2", 1);

tl.addLabel("step3", 2);

tl.addLabel("step4", 3);

 

 

 

[GreenSock]

There are many ways you could do that. Here's one (assuming I understand your question correctly): 

tl.add(() => changeColors("#9365F0", "white", "white", "white"), "step2");

Here's another:

tl.call(changeColors, ["#9365F0", "white", "white", "white"], "step2")

Does that help? 

[DeltaFrog]

Thanks Jack!  The code works.