Jump to content


Angular 8 + GSAP

Moderator Tag

Recommended Posts

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



import { Injectable } from '@angular/core';
import { gsap, Power2, Elastic } from 'gsap/all';
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 });



import { Component, OnInit } from '@angular/core';;
import { GsapService } from 'src/services/gsap.service';
selector: 'app-any',
templateUrl: './any.component.html',
styleUrls: ['./any.component.scss']
export class AnyComponent implements OnInit {
constructor(private _gsapService: GsapService) { } // inject service
ngOnInit() {
public fOpeningAnim() {
   const anim = this._gsapService;
   const mainContainer = '#opening-container';
   anim.fFadeFrom ( mainContainer, 1, 0, 1 );
  • Like 3
Link to comment
Share on other sites



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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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






Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.