Using GSAP TweenMax with Angular

In this tutorial I’ll showhow you can install TweenMax animation library into an existing Angular project. TweenMax is the market leading animation library, used by professionals to animate html elements, making web projects more engaging and pleasant for your eyes.

Let’s start! This is the tech stack I’m currently using, there shouldn’t be problems with updated versions of Angular, but I didn’t had the chance to do deep tests with them.

Angular CLI: 6.0.5
Node: 8.11.2
OS: linux x64

I start by creating a new angular-cli project:

ng new test-gsap

After a short time the project will be ready, open it an run the serve command to check that everything is working.

cd test-gsap
ng serve --open

The default “Welcome to app!” page should be visible without issues.

Install GSAP library via NPM

Install the library and the definition files:

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

To include the library it’s better to add the uncompressed source file into the scripts section of the angular configuration. Some tutorials are suggesting to add it into the main.ts file but this was causing problems when running a production build.

angular.json 

"projects": {
  "test-gsap": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/test-gsap",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "src/styles.css"
          ],
          "scripts": ["node_modules/gsap/src/uncompressed/TweenMax.js"]
        },

Jumping mushrooms!

This is a VERY SIMPLE PROJECT: my idea is to display and animate a funny mushroom on the screen, nothing fancy, but the purpose of this tutorial is demonstrating how to include GSAP properly.

Open src/app/app.component.html and past the following html:

<div style="width: 500px; height: 500px; background-color: lightblue; margin-bottom: 30px;">

 <img #mushroom src="../assets/mushroom.svg" style="width: 50px; height: 50px;" />

</div>

<button (click)="doIt()">Start</button>

Notice that I used a reference variable on the img tag, I’ll need it to get the nativeElement in the controller. The svg file can be found at this link.

Open src/app/app.component.ts and edit it:

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

declare var TweenMax: any;

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
 @ViewChild('mushroom') box: ElementRef;

 ngOnInit(): void {
 this.doIt();
 }

 doIt(): void {
 TweenMax.fromTo(this.box.nativeElement, 2, {x: 20}, {x: 440, ease: Power1.easeOut});
 TweenMax.fromTo(this.box.nativeElement, 2, {y: 20}, {y: 440, ease: Bounce.easeOut});
 }
}

Please note this line:

declare var TweenMax: any;

We must declare a generic variable called TweenMax or the project won’t compile.

Test it for production

We are done, time to run a production build:

ng build --production
http-server dist/test-gsap -p8080

Open your browser at localhost:8080 and you should see a bouncing mushroom 🙂

You can see a live demo here: https://mrfragit.github.io/test-gsap/index.html

Resources

TWEENMAX: https://greensock.com/tweenmax/

GSAP NPM docs: https://greensock.com/docs/NPMUsage

Mushroom svg taken from Wikimedia Commons: https://commons.wikimedia.org/wiki/File:Tango_Style_Mushroom_icon.svg