onUpdate callback function problem

[ashura]

Hi no need for big explanation here how can I get the progress of animation in a gsap? is it a onUpdate or what? 
cause I'm trying to update the animation in a canvas 

Here is the code, but it seems like it is giving me undefined and null...its completely nothing..care anyone to explain if I'm using it wrong? 

 

        tl.add(
            gsap.to(
            {},
            {
                duration: 0.5,
                onUpdate: (animation) => {
                    console.log(animation)
                // drawCircles(i, animation.progress());
                },
            }
            )
        );

 

[PointC]

Please give this a whirl:

 

gsap.to(
  {},
  {
    duration: 0.5,
    onUpdate: function () {
      console.log(this.progress());
    }
  }
);

Happy tweening.

[ashura]

Thanks pal @PointC however I find more alternative cause I'm using a typescript 

which might be better..

 

            const progressProxy = { progress: 0 };
            tl.add(
                gsap.to(progressProxy, {
                duration: 1,
                onUpdate: () => {
                    drawCircles(i, progressProxy.progress);
                },
                })
            );

 

[GreenSock]

Just beware that the one from @PointC will have no easing applied which I assume is what you want, but your example is actually tweening a value on an object, thus the default easing would be applied. You should set ease: "none" on yours if you want to eliminate the easing. 

 

Another option is to leverage getter/setter methods: 

let proxy = {
  _p: 0,
  getProgress: () => proxy._p,
  setProgress(progress) {
    console.log("progress", progress);
    proxy._p = progress;
    //drawCircles(i, progress);
  }
};
gsap.to(proxy, {
  setProgress: 1,
  ease: "none",
  duration: 2
});