GSAP in Ionic project

user_7692650 0
Viewed 1358

How can Import the GSAP library into an Ionic project. Just using npm install gsap don't work when I import through

import { TweenMax, TimelineMax} from "gsap";

I use typescript. Thanks

gsap ionic-framework typescript
2 Answers

You don't need Typings for it. I've used it in several projects (all of them Typescript):

  1. Put the GSAP libraries you want to use in assets/javascripts

  2. Include your file in your src/index.html file like this:

    <script src="assets/javascripts/TweenMax.min.js"></script>

  3. Right after your imports, declare the GSAP objects like this (in all the views you will be using them): 

    /*
  Normal imports here..
*/
import { LoginPage } from "../login/login";

declare var TimelineMax: any;        
declare var TweenMax: any;
declare var Power1: any;

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
  providers: [Data, Api, DatePipe]
})

export class ProfilePage {
  ...

  4. Use like normal: 

    ...
ionViewDidLoad(){
  TweenMax.from(".logo", .5, { 
    opacity: 0,
    y: -72,
    ease:  Power1.easeOut
  });
}
...
user_32882380
Related