Get current target onupdate in staggered Tween in GSAP 3

[Ben Carey 10 Likes (Newbie)]

Is there a way to obtain the current target via the onupdate callback within the fromTo tween in GSAP 3?

 

In GSAP version 2, I was able to do this:

 

this.timeline.staggerFromTo(this._shuffle(this.spheres), 4,
    { positionY: -1 },
    {
        positionY: 1,
        repeat: -1,
        yoyo: true,
        ease: Power1.easeInOut,
        onUpdate: function onUpdate(a) {
            a.target.mesh.position.y = a.target.meshInitPosY + (a.target.positionY + 1) * 200;
            a.target.mesh.rotation.y = a.target.meshInitRotY + (a.target.positionY + 1) * 3;
        },
        onUpdateParams: ["{self}"]
    }, '0.01');

 

However, in GSAP 3, all I get is an array of all of the targets and I need to get the actual target...

 

this.timeline.fromTo(this._shuffle(this.spheres),
    { positionY: -1 },
    {
        duration: 4,
        positionY: 1,
        repeat: -1,
        yoyo: true,
        ease: Power1.easeInOut,
        stagger: 0.01,
        onUpdate() {
            console.log(this, this._targets); // this returns all of the spheres
            //this.target.mesh.position.y = this.target.meshInitPosY + (this.target.positionY + 1) * 200;
            //this.target.mesh.rotation.y = this.target.meshInitRotY + (this.target.positionY + 1) * 3;
        }
    });

Am I missing something very obvious?

[Carl 11,180 Likes (Superhero)]

You are going to want to assign the onUpdate inside the stagger object:

 

gsap.to(".box", {
  x: 100,
  stagger:{
    each:0.1,
    onComplete:function(){
      console.log(this.targets()[0])
    }
  }
});

 

this demo uses onComplete but onUpdate should work the same

 

See the Pen JjowpLO?editors=0011 by snorkltv (@snorkltv) on CodePen

[Ben Carey 10 Likes (Newbie)]

Perfect!!!! Thank you so much!!! This has sorted it 😀