Using TweenMax in Angular2 project

Question

How can I setup TweenMax in my Angular2 project. Instead of adding the script in my HTML I want to be able to import TweenMax similar to this:

import { TweenMax } from 'gsap';

NOTE: I'm using angular-cli.

Answer 1

There is an easier way just

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

in your ts file, import gsap

import {TweenLite} from "gsap";

and in your method or on ngOnInit you can write

let photo = document.getElementById("photo");
TweenLite.to(photo, 2, {width:"200px", height:"550px"});

if you have a div with and ID of photo

Answer 2

Adding this external package to angular 2 is almost the same like any other package out there. jquery, firebase, you name it..

But you should know that at this moment, there are no typings file for the gsap module. So you can't cherry pick the imports however you want. This also means no intelisense in typescript :( But you can still use it like this:

Step 1: npm install it

npm install gsap --save

Step 2: prevent typescript for complaining about not finding the clases by adding the following line to typings.d.ts file:

declare var module: { id: string };

declare let TimelineMax: any; // declare it as any.
 // so no error complains, Typescript compiler is happy now:)

Once the typings file are created for this module step 4 becomes:

typings install gsap --save. After that make sure you have included: /// <reference path="../typings/path to your gsap typings" />

Step 3: use it in your component - for example in app.component.ts:

import 'gsap' // this is required for TimelineMax() to work
// decorator stuff here.
export class AppComponent implements OnInit{

  ngOnInit(){

    let targetObject = document.getElementByTagName('h1');

    let tl = TimelineMax(); // this is free of errors now

    tl.from(targetObject, 1, { x:400 });
    tl.play();
  }
}

Step 4: in this setup, there is no need to add anything to the main.ts (bootstrap file) so enjoy!