Animating Angular Apps with GSAP

GreenSocks Animation Platform GSAP is a powerful animation library that enables developers to create rich and robust animation in a short time. It offers the following features;

  • User friendly
  • Compatibility
  • Lightweight

Prerequisites for this tutorial

  • Basic HTML, CSS and JavaScript knowledge
  • Basic Angular knowledge
  • Nodejs installed
  • Basic NPM installations

Creating new Angular project via Angular CLI

Creating a new Angular project is best easily done via the CLI. The CLI makes it easy to create an application that already works, right out of the box. Learn more about Angular CLI here. If you are new to Angular, install the CLI by running this command on your preferred terminal npm install -g @angular/cli.

Let's create a new project since we have the CLI installed. Launch your terminal and run

  • ng new gsap-tut
  • cd gsap-tut
  • ng serve or ng s --o to make the browser open the URL in the default browser.

open the project file in any code editor of your choice.

Installing GSAP

Install GSAP and its definition types by running the following commands

  • npm install --save gsap
  • npm install --save-dev @types/greensock

This adds the GSAP library to our package.json file.

Creating HTML Markup to HTML template

Open app.component.html file and add the following code

<div class="hero">
                <img  #hero src="https://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/f/27/f272b6b4-0211-11e8-8824-2b56b850bd60/5a6a440a03cb0.image.jpg?resize=1200%2C800" alt="">
                <h1 class="headline" #headline> Dream Big</h1>
            </div>
<button (click)="play()">Start</button>

pay attention to the #hero and #headline. This is termed template variable in Angular. It provides a way of capturing a reference to any specific DOM element, component, or directive in order to use it somewhere in our template itself. Read more about Template Variables here , here and here .

Importing the required GSAP Library

GSAP library will be added to the component file using the import statement like so

  • import {Power2, Bounce} from 'gsap/all';
  • import { TweenMax, TimelineMax } from 'gsap';

Update your app.component.ts file with the code below

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import {Power2, Bounce} from 'gsap/all';
import { TweenMax, TimelineMax } from 'gsap';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

 @ViewChild('headline') text: ElementRef;
 @ViewChild('hero') hero: ElementRef;

tl = new TimelineMax();

 ngOnInit(): void {
 }

 play() {

 this.tl
   .fromTo(this.hero.nativeElement, 1.2, {height: '0%'}, { height: "100%", ease: Power2.easeInOut })
   .fromTo(this.hero.nativeElement, 1.2, {width: '100%'}, {width: "80%",ease: Power2.easeInOut}, "-=1.2")
   .fromTo(this.text.nativeElement, 1.2, { opacity: 0,}, { opacity: 1, ease: Power2.easeInOut}, "-=1.5")
   .fromTo(this.text.nativeElement, 1.2, { y: 0}, {y: 20,  ease: Bounce.easeInOut}, "-=1.5")
   .fromTo(this.text.nativeElement, 1.2, {x: 0}, { x: 20, ease: Bounce.easeInOut }, "-=1.5")
 }
 }

With the above configurations, your angular app should be animated using GSAP without any issues.

Find complete code used for this tutorial here

Learn more about GSAP using these articles

Comments (2)

Edidiong Asikpo's photo

This is an amazing article. I am definitely looking forward to exploring GSAP soon.

Thanks for sharing.