Jump to content
Search Community

Angular 8 + GSAP

R.Lloyd test
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

 

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 );
}
  • Like 3
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.
×
×
  • Create New...