[Angular 8 + GSAP]

I just want to share to fellow Angular Developers my GSAP workflow. Might come in handy.

I use service for my GSAP engine and share it to any components who needs or wants it. Here's an example of simple fading animation. You can expand from these.

npm i gsap

 

gsap.service.ts:

import { Injectable } from '@angular/core';

import { gsap, Power2, Elastic } from 'gsap/all';

@Injectable({

providedIn: 'root'

})

export class GsapService {

/*---=| GSAP v3 Animation Engine |=---*/

 

/*--=| Fade From |=--*/

public fFadeFrom(e, tym, alfa, dlay) {

  gsap.from(e, { duration: tym, opacity: alfa, ease: Power2, delay: dlay });

}

}

 

any.component.ts:

import { Component, OnInit } from '@angular/core';;

import { GsapService } from 'src/services/gsap.service';

 

@Component({

selector: 'app-any',

templateUrl: './any.component.html',

styleUrls: ['./any.component.scss']

})

export class AnyComponent implements OnInit {

 

constructor(private _gsapService: GsapService) { } // inject service

 

ngOnInit() {

   this.fOpeningAnim();

}

 

public fOpeningAnim() {

   const anim = this._gsapService;

   const mainContainer = '#opening-container';

   anim.fFadeFrom ( mainContainer, 1, 0, 1 );

}