Angular 8 + GSAP

[R.Lloyd 3 Likes (Newbie)]

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

}

[StrangeCargo74 0 Likes (Newbie)]

Thanks!

 

I was wondering if / how you had this running in production mode? I've been kicking the tyres on gsap with Angular and I'm finding this a problem.

[ZachSaucier 7,163 Likes (Superhero)]

Hey @StrangeCargo74 and welcome to the forums. 

 

What error specifically are you running into? A minimal example of the issue(s) would be helpful for us to help you. Perhaps starting a new forum thread would be helpful.

[StrangeCargo74 0 Likes (Newbie)]

I think it's a known issue, I was wondering if the OP had a solution.

 

Thanks!