Angular and eventCallback

[StormCode]

Hi There, I'm wondering if it is possible to get the following to work with Typescript/Angular:

 

  animateIn(ani) {
    // only do stuff if requested animation is different than active slide
    if (ani !== this.currentAnimation) {
      this.currentAnimation.reverse().timeScale(5); // faster speed
      // this.currentAnimation.vars.callbackScope = this;
      this.currentAnimation.eventCallback('onReverseComplete', this.playNext);

      this.nextAnimation = ani;
    }
  }

  playNext() {
    this.nextAnimation.play().timeScale(1);
    this.currentAnimation = this.nextAnimation;
  }

 

It seems  playNext() doesn't fire after "onReverseComplete"

 

I have a simple StackBlitz  https://stackblitz.com/edit/angular-csxrtd

 

Thanks a lot for any help.

 

See the Pen by edit (@edit) on CodePen

[ZachSaucier]

Hey StormCode and welcome.

 

I don't quite understand your logic. You want animation 1 to play on init and then allow the buttons to reverse the running animation and play the animation for the button clicked on, right? I'd set it up like this: https://stackblitz.com/edit/angular-ztcmvh?file=src/app/app.component.ts

 

I think (other than a logical error where things weren't playing in your latest edit) the key difference is that I change the timeScale before .reverse()ing the animation. This is because if you do .reverse().timeScale(positiveNumber) then it will play forwards. Alternatively, you could just use a negative timeScale (granted you're using GSAP 3) - no need to even call .reverse()  

[StormCode]

You sir, are a genius! and I see the light.

 

I based my "logic" on this 

See the Pen yJLyxM by GreenSock (@GreenSock) on CodePen

Seriously Zach... Thanks a lot mate.