GSAP in Ionic project

问题:

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

回答1:

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
     });
   }
   ...
   

回答2:

Typical import

import {TweenMax, Power2, TimelineLite} from "gsap";

Get the parts that aren't included inside TweenMax

import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

For More information-

https://www.npmjs.com/package/gsap#npm