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 );
}
