[Using GSAP with Angular2]

You have to do that because you don't have any definitions installed for GSAP. Install them, and the errors go away.

Thanks for the reply, but can you be more specific? Im not a pro in this, just learning. But would really want to know what you mean by installing the definitions.

[delay in visibility]

autoAlpha is just a smart combination of opacity (alpha from AS) and visibility - it's the same as saying opacity, except if opacity === 0, GSAP will set visibility:hidden, otherwise visibility:visible. This gives a pretty good performance boost if you keep a lot of things hidden on your pages.

Amazing, thanks. So happy for this. 

[Using GSAP with Angular2]

Started experimenting with this again and but made a github this time with an angular 2 quickstart wich i made with the angular-cli: https://github.com/ekstremedia/eks-app

 

Working demo with gsap and bootstrap 4. Will work more on it later.

 

But in this app I need to do:

declare var ease, TimelineMax,TweenMax,Power4,Power1,Power2,Power3,Bounce, Elastic:any;

On the components where i will use gsap to make compiler happy.. and im not sure if my solution is good but im open for tips! 

[Using GSAP with Angular2]

After some more fiddling i made it work in Angular2.

 

I had a ts-file loading the js. files into a html index template and i removed the gsap js files from there to just inside the index.html and then it worked, thanks to OLUBLAKE's input. Thank you for the plunker, i missed the console.log's and then understood that it actually worked. Here is a modified version with visual animation: http://plnkr.co/edit/jpbljE?p=preview of a working greensock angular2 app. 

[Using GSAP with Angular2]

Hi and welcome to the GreenSock forums,

 

We haven't yet used the Angular 2.0 beta. We know plenty of folks have had success with Angular and the Angular team is largely very "GSAP-friendly". It's possible some of our community members have tried 2.0 and I am sure if they have that they would love to help you. In the meantime it might be worthwhile to also post on an Angular 2 forum. 

 

 

This isn't an Angular issue. The problem is related to modules. If you are trying to import every GSAP class individually, you might want to check out this thread from a couple of days ago.

http://greensock.com/forums/topic/13441-greensock-tweenlitetweenmax-exported-globals-with-commonjs-module/

 

All GSAP classes are global, so with SystemJS you could register GSAP like this...

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

And then to use GSAP, you can just import it like this...

import {Component} from 'angular2/core';
import "gsap";

I don't know how use Angular2 yet, so I wasn't sure how to access the element, but you can see it working in the console.

http://plnkr.co/edit/0IK064Hrr0vuV6OM3DpI?p=preview

 

Hey Carl and thanks, and thank you OSUBlake. I tried your code, but still cant get any animations. I tried this: 

import {Component} from 'angular2/core';
import "gsap";

@Component({
    selector: 'opning',
    templateUrl: './components/opning/opning.html',
    styleUrls: ['./components/opning/opning.css']
})
export class OpenCmp {
    constructor() {
        var tl = new TimelineMax({ delay: 1 });
        var logo = $('#logo')
        tl.from(logo, 1, { x: -200, scale: 0.1 }, 0.7);
        tl.play();
        console.log('played');
    }
}

In compiler i get this error msg:

error TS2304: Cannot find name 'TimelineMax'. 

Do I have to declare tl in any other way? I have included TimelineMax.min.js and TweenLite.min.js 

 

I also dont see animation on the plunker, tried to fiddle with it with no luck too.

[Using GSAP with Angular2]

Hey, I've wondered on how you can use GSAP with Angular2 if anyone here have done that.

 

I loaded the TimelineMax.min.js in my main index.html-file, but having problem importing it into a component.

 

My component look like this:

import {Component} from 'angular2/core';
//import {TweenLite} from 'gsap/src/minified/TweenLite.min.js';
//import {TimelineMax} from 'gsap/src/minified/TimelineMax.min.js';
//import {TL} from 'gsap/src/minified/TimelineMax';
import {TL} from 'gsap/src/uncompressed/timelinemax';
@Component({
    selector: 'opning',
    templateUrl: './components/opning/opning.html',
    styleUrls: ['./components/opning/opning.css']
})
export class OpenCmp {
constructor() {
console.log("played");
console.log(TL);
// console.log(TweenLite);

//    var tl = new TimelineMax();
/*var logo = $("#logo");
tl.from(logo, 4, { z: 500, y: 74, visibility: "visible" });
//tl.from(logo, 2, { left: "632px" });
tl.play();
*/
}
}
 

I installed gsap with npm install gsap so it is in my projects /node_modules/ .

 

Have tried several approaches, but i can not set tl = New TimelineMax()  in that typescript class and I dont know how to load\import it. Anyone done this with angular2 ? I used this as my starting point: https://github.com/mgechev/angular2-seed