Getting the progress of an individual tween within a timeline / scrollTrigger

[mheavers]

Hi - I'm using GSAP's timeline, and I can successfully get the overall timeline's progress, but I want to get the progress of a specific tween within that timeline. How do I do this?

This is my code:

```

tl = gsap.timeline({
  // yes, we can add it to an entire timeline!
  scrollTrigger: {
    ...
    onUpdate: (timeline)=>{
      console.log(timeline.progress); //this works
    }),
  },
});
tl.from(".transform-title", { autoAlpha: 0, translateY: 20, onUpdate: (thisTween)=>{
  console.log(thisTween.progress) //this doesn't. are no parameters passed onUpdate? (thisTween undefined)
} }, "start");

```

Seems like the timeline as a whole is passing a reference to itself as a parameter to the onUpdate function so that I can get progress of the timeline as a whole, but the individual tweens are not.

[GreenSock]

The problem with your code is that you're using an arrow function which locks scope to wherever it was defined! So if you just use a regular function, you'll be able to use this.progress() to get that tween's progress value. 

 

Also, keep in mind that a ScrollTrigger's onUpdate is different than a tween's onUpdate - the ScrollTrigger instance itself gets passed to the ScrollTrigger's onUpdate callback. A tween's onUpdate doesn't get any parameters by default, but "this" inside that [regular] function refers to the tween instance. 

 

tl = gsap.timeline({
  scrollTrigger: {
    ...
    onUpdate: trigger => console.log(trigger.progress)
  },
});
tl.from(".transform-title", { 
  autoAlpha: 0, 
  translateY: 20, 
  onUpdate: function() {
    console.log(this.progress());
  }
}, "start");

Does that clear things up?

[mheavers]

Ahhhh...yes - really thought I tried that. Thank you!