GS with Ionic 2

[Axalon]

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.

[GreenSock]

I'm not at all familiar with Ionic 2, no. Sorry. But I cannot imagine how or why it would be a problem to use GSAP with it because GSAP doesn't care about the rendering layer - it just changes properties over time. Literally, like any properties. Anything JavaScript can touch, GSAP can animate. It was specifically designed to be rendering-layer-agnostic so that once you learn GSAP, you should be able to use it pretty much anywhere, with any framework (or no framework). Let us know if you run into any trouble, though. 

 

If anyone here knows about Ionic, my guess would be OSUblake (he's our resident Angular expert too)

[OSUblake]

I didn't even know there was an Ionic 2. Does it even use the DOM or is it native? And what are you having trouble with? 

[Axalon]

I didn't even know there was an Ionic 2. Does it even use the DOM or is it native? And what are you having trouble with? 

 

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.

[OSUblake]

I've never injected GSAP, even with Angular 2. As long it's loaded, it should be global. How are you loading it? Script tags? Module loader?

[Axalon]

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

[OSUblake]

Geez. I was going to say that a script tag would be the easiest way, but that's not working? What happens if you console.log(TweenLite)

 

Maybe you have to bootstrap it. In Angular 1 you used to be able to create constants like this, which could then be injected into whatever.

angular.module("app", [])
  .constant("TweenMax", TweenMax)

I guess they don't have that anymore, but I saw this question on SO as a way to create constants and bootstrap them.

http://stackoverflow.com/questions/34986922/define-global-constants-in-angular-2

[Axalon]

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?

[OSUblake]

Hmmm... this might be related to SystemJS. Are you using SystemJS to install modules? If you install GSAP with it you might need to do this...

import "greensock";

If not, try this...

import "gsap";

I've also registered GSAP with SystemJS like this...

System.set("gsap", System.newModule({
  "default": window.com.greensock
}));

But I've also gotten it to work just using script tags...

http://plnkr.co/edit/oZm5CRFPkFNnSpUW6gMY?p=preview

 

Another thought. Is your TypeScript compiling? Depending on how you configure the compiler, you might need to get the defintions for GSAP or declare the values.

declare var TweenMax;
declare var TimelineMax;

[Axalon]

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?

[Carl]

GSAP on NPM:

 

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

[OSUblake]

I'll try to build to an example later. There's nothing unusual about the code you posted, and i see no reason for there to be a problem.

[Axalon]

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/

[hughred22]

I would LOVE TO see an example, tutorial code on implementing GS with Ionic 2 / Angular 2!! The newest beta get rid of @Page and back to @Component to favor more Angular JS. But still, very confusing in trying to figure out ourselves how to integrate GS. GS and Ionic will be the best marriage tho for animation solution and I can not wait to learn how to do that!!  

[Axalon]

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!

[OSUblake]

Thanks for posting this. I totally forgot to follow up on trying to make a demo.

[akwwhite]

Hey I'm trying to use Draggable with Ionic 2. TweenMax, TweenLite, TimelineMax, and TimelineLite all work almost out of the box (with the typings), but it keeps telling me that Draggable is undefined. Have any of you been able to get Draggable to work recently? I had it working before the official release of Angular 2.

[xtremeplus]

Guys....Pls....It is super important for someone to create a sample code or video help module on how to install and configure GSAP and all its dependent or independent plugins.

 

All the above examples and guide don't work. I have been trying to find something useful for far too long now.

 

Installation for:

 

- WebPack

- Gulp

 

e.t.c

 

 

This is super important. Pls...

 

@OSUblake.....Stop promising. Give us something

[GreenSock]

xtremeplus, sorry to hear about the frustration. We're looking into revamping a few things in the next release to make it easier, but until then have you tried just defining aliases in your webpack config file, like:? 

resolve: {
  root: path.resolve(__dirname),
  extensions: ['', '.js'],
  alias: {
    "TweenLite": "gsap/src/uncompressed/TweenLite",
    "Draggable": "gsap/src/uncompressed/utils/Draggable",
    "CSSPlugin": "gsap/src/uncompressed/plugins/CSSPlugin"
  }
}

...and so on.

 

This basically just maps things to particular files so that Webpack can find them when you try importing things like Draggable. 

[xtremeplus]

Thanks greensock,

 

I finally got it to work by following your lead. Few things to note though.

 

• For some reason the root property was not valid. I had to delete that line
• Secondly, extensions cannot be empty - extensions: ['', '.js']. I set it to extensions: ['.js', '.json']

 

Finally my webpack config found in @ionic/app-scripts/config/webpack.config.js was as below:

 

    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            "TweenLite": "gsap/src/uncompressed/TweenLite",
            "Draggable": "gsap/src/uncompressed/utils/Draggable",
            "CSSPlugin": "gsap/src/uncompressed/plugins/CSSPlugin"
        }
    },

My .ts file is as below

import { Component } from '@angular/core';


import { NavController } from 'ionic-angular';


import jQuery from 'jquery';


import {TweenMax} from 'gsap';




@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {


  constructor(public navCtrl: NavController) {


  }


  animate(){
    var square = jQuery('.square');
    TweenMax.to(square, 1, {x: 200, repeat: 10, yoyo: true});    
  } 


}

 

[GreenSock]

Excellent, thanks for letting us know. 

[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?

[OSUblake]

Just copy the package you download from GSAP over the npm package. That way the file structure remains the same.

 

And if anybody is looking for an easy to use module bundler, I would recommend checking out brunch. It simplifies a lot of the configuration needed for webpack or system.js.

[christianpugliese]

for anyone having trouble with this, on ionic 2.2.0

component.ts:

import 'gsap';
import "gsap/ScrollToPlugin";


declare var TweenMax;
declare var ScrollToPlugin;

 

[DeepDalvi77]

Thanks @xtremeplus and @Axalon ,I have followed all the step mentioned but gsap module is not avaliable . gsap files are there in node_modules and typings folder but its definations are not shown when i import then.???