[Angular Page/Router Transitions/Animations]

Thanks Zach I'll crack on.  And post if I find a solution.

Cheers

[Angular Page/Router Transitions/Animations]

Hello, Has anybody worked out how to perform Page/Router transitions with Angular and GSAP
Thanks a lot

[Angular and eventCallback]

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. 

[Angular and eventCallback]

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

[Problems with scrollTo in Chrome]

I had the same problem...
See it in action here:- 
https://stackblitz.com/edit/angular-uvzo9a?file=src%2Fstyles.css

[Angular 8 ScrollToPlugin]

I found out what was causing the problem.... I had  

html {
scroll-behavior: smooth;

}

 

... in my CSS !  I hope this helps somebody else

 

 

See it in action here:- 
https://stackblitz.com/edit/angular-uvzo9a?file=src%2Fstyles.css

[Angular 8 ScrollToPlugin]

Hmmn Its works great on StackBlitz but not in my project. Must be something to do with the way I have things set up. I shall investigate and re-post. Cheers

[Angular 8 ScrollToPlugin]

https://stackblitz.com/edit/angular-uvzo9a?file=src%2Fapp%2Fapp.component.ts

 

Here you go thanks!

 

 

OH! Its works now??!! well... in StackBlitz

[Angular 8 ScrollToPlugin]

I was just wondering if anyone has successfully got ScrollToPlugin (v3.0.5) to work with Angular 8. I have it working to a certain degree but it does not respect the vars in the tween.

      gasp.to(window,
        {
          delay: 0,
          duration: 10,
          ease: 'back',
          scrollTo: 978
        }

All that happens is a smoothScroll to 978. The 'ease' is ignored and strangely  the 'delay' is 10secs which is what the duration is set to!

 

My component contains:-

 

import { gsap } from 'gsap/all';

import ScrollToPlugin from 'gsap/ScrollToPlugin';

 

  constructor() {

    gsap.registerPlugin(ScrollToPlugin);
  }

  ngOnInit() {
    const plugins = [ScrollToPlugin];

}

 

Thanks a lot if anyone can help!!