Finally had a chance to sit down with this again. Turns out it was relatively simple to implement, even easier than doing it in Angular 2.
Using Ionic 2 Release Candidate 0, what I did was:
Create a new project:
ionic start gsaposxionic blank --v2
Grab the GSAP and jQuery NPMs:
npm install gsap --save
npm install jquery --save
Install typings if you haven't already
npm install -g typings
Install the TypeScript type definitions:
typings install dt~jquery --global --save
The typings repository for gsap isn't particularly great, you can find a more comprehensive type definition here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/greensock/greensock.d.ts
I saved the above file in the 'typings' directory then referenced it in the typings/index.d.ts which should look something like this now:
/// <reference path="globals/jquery/index.d.ts" />
/// <reference path="greensock.d.ts" />
Note: Because gsap and jquery are written in javascript and Ionic 2 uses TypeScript, type definitions are needed
Add "files" field to tsconfig.json
In order to point to the type definitions you're going to need add in a "files" field into tsconfig.json, which is located in the root of your app. "files" should point to the index file of your type definitions located in typings/index.d.ts
Here's what my tsconfig.json looked like:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"target": "es5"
},
"files": [
"typings/index.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
NOTE: This configuration worked perfectly fine while working in ionic serve and in Ionic View, however I ran into some odd pathing options when doing builds for iOS and Android.
Apparently it kept looking for the index.d.ts file in gsaposxionic/.tmp/typings/index.d.ts and spit out and error when it couldn't find it. Not sure why this was happening, but the only solution I could find was to write in the absolute path in so "files" became:
"files": [
"/Development/Projects/gsaposxionic/typings/index.d.ts"
]
After making the change the builds went without a hitch and worked both on iOS and Android.
Import gsap and jquery into your Component:
All you have to do now is import the libraries at the top of your component. In this case, I added it to home.ts which was the default page created when starting a blank Ionic project.
import "gsap";
import $ from "jquery";
You don't need jQuery as you can reference DOM objects with document.getElementsByClassName or document.getElementByID but I wanted to keep it in for the sake of simplicity.
Here's what my home.ts ended up looking like. I added in a test animation to ngOnInit(), animation didn't work when I added it into the constructor.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import "gsap";
import $ from "jquery";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
ngOnInit() {
var square = $('.square');
TweenMax.to(square, 1, {x: 200, repeat: 10, yoyo: true});
}
}
Hope this helps!