Axalon

Wanted to follow up on this. Implementation is working well but we want to use premium plugins MorphSVG and DrawSVG. We have licenses for both but as has been mentioned in other threads, there's no NPM for it. Since we have the JS files for the plugins, how can we hook them into the gsap npm already installed?

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!

Hey Blake, I appreciate that. It looks like the @Page decorator is essentially the same as @Component with a slightly different approach to bootstrapping: http://www.joshmorony.com/using-angular-2-without-ionic-2-part-1/

I'm not using System JS, not sure it works with Ionic. Also, found out there's no bootstrapping with Ionic 2. GS doesn't happen to have an NPM package does it?

You're probably right with your suggested implementation as I might be approaching it all wrong. So we're on the same page, I've created a blank project in Ionic 2-- There's app.js import {App, Platform} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {HomePage} from './pages/home/home'; @App({ template: '<ion-nav [root]="rootPage"></ion-nav>', config: {} // http://ionicframework.com/docs/v2/api/config/Config/ }) export class MyApp { static get parameters() { return [[Platform]]; } constructor(platform) { this.rootPage = HomePage; platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); }); } } which calls home.js import {Page} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/home/home.html' }) export class HomePage { constructor() { } } and has a template home.html <ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content class="home"> <ion-card> <ion-card-header> Card Header </ion-card-header> <ion-card-content> Hello World </ion-card-content> </ion-card> </ion-content> Where do you think I should implement or inject GS?

Was using script tags but maybe I should go for module loader?

It uses the DOM. I'm still pretty new to it and am having trouble trying to figure out where exactly I need to inject GS for use in my templates. I've looked at some of the Angular 2 implementations and while Ionic 2 pretty much extends everything in Angular 2 it looks like it has it's own initialization that differs from Angular 2.

Hey guys, Curious if any of you have tried using GS with Ionic 2 yet? Having trouble getting GS integrated, saw a couple topics on integrating with Angular 2 but I wasn't able to get it to work that way.