Two animations at the same time, finish both when first one is complete

[dragoon]

Hello,

I would like to have 2 animations that start at the same time, one with a fixed duration and another is an infinite yoyo animation. I would like to stop yoyo animation when the first animation is complete.

Here is my current code:

 

gsap.fromTo(flake, {x: x, y: y}, {
            duration: fall_duration,
            y: endY,
            onComplete: this.onSnowEnd.bind(this),
            onCompleteParams: [flake],
            ease: Power0.easeIn
        });
gsap.to(flake, {duration: 3, x: x + (Math.random() * 150 - 75), repeat: -1, yoyo: true, ease: Power1.easeInOut});

I would like to stop yoyo as soon as the first animation is complete. 

[Cassie]

Heya! Sure thing, you can use an onComplete callback to pause the yoyo tween.

 

Something like this.

 

let yoyoTween = gsap.to(flake, {...});

gsap.to(flake,{
  ...
  onComplete: () => { yoyoTween.pause()},
});

 

[dragoon]

Thank you. Didn't understand it was that easy!