Jump to content
GreenSock

woowe

GSAP Business Green in Angular 2+

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone, I am looking for a way to integrate gsap business green in my angular 2 app. I would love to be able to leverage typescript with this as well.

Link to comment
Share on other sites

We're not really TypeScript people, but I think OSUblake created some definition files somewhere but I can't seem to find them online now. Hopefully Blake will swing by at some point and offer some advice. 

Link to comment
Share on other sites

This post might help you out...

https://greensock.com/forums/topic/15726-gsap-angular2-typescript-import-not-working-properly/?p=72107

 

I will caution you that those definitions are not complete, and last time I checked, created errors for TweenMax. It looks like those definitions were recently updated, with some parts being auto-generated.

 

GreenSock really needs to maintain these definitions to prevent problems like that. I have been working on creating a new set of definitions using the latest version of TypeScript (2.3). Using the new keyof lookup in TypeScript, it's now possible to achieve what I would call the holy-grail for GSAP definitions, type safety inside the vars/config object for a tween. This means no-more misspelled/invalid properties, as the list of properties for the object you are tweening will show up in autoComplete.  :-o

 

.

  • Like 1
Link to comment
Share on other sites

Thanks for the replies, I completely agree that GSAP needs to maintain the type definitions, especially in this day and age. Not to mention the new technologies that google is coming up with to be able to transpile typescript into closure code. But I guess my real question is that, how would I take advantage of the Business Green plugins that I paid for, while wanting to do development in typescript? Right now I had to just download the package and then stick it in a folder in my project. 

Link to comment
Share on other sites

Gosh, I really wish I had a better answer for you - we're just not TypeScript devs and we really try to stay focused on the core tools. I've learned the hard way over the years that just whipping together something and throwing it out there actually ends up requiring a LOT more time in the years ahead. Creating and then supporting TypeScript definitions means we'd not only have to learn it (which probably isn't hard at all) but then it's one more thing to track and update and test and then answer questions about in the forums, potentially running into conflicts with newer versions or specific editors, etc., etc.

 

This seems like it might be a better fit for someone who's a TypeScript devotee and loves GSAP and can create their own github repository to share things. We'd happily give that person a free Club GreenSock membership with access to all the goodies of course :) 

Link to comment
Share on other sites

@woowe,

 

Copy all your member plugins into the gsap folder in your node modules. You should then be able to import like this...

import {TweenLite, Power2, TimelineMax, TweenMax} from "gsap";
import MorphSVGPlugin from "gsap/MorphSVGPlugin";

For types, that's another issue as the current set of definitions are not only incomplete, but incorrect in some cases.

 

This works...

TweenLite.to("#foo", 1, {
  x: 100
});

This is an error...

TweenMax.to("#foo", 1, {
  x: 100
});

The problem is the TweenConfig interface, which is only on TweenMax.to. For a quick fix, try adding this to your code...

declare module "gsap" {
  export interface TweenConfig {
    [p: string]: any;
  }
} 

@Jack

 

What about setting up a TypeScript repo, kind of like Pixi does here? I can set it up initially with some new definitions, and once that is done, it's really not going to change that much, so maintenance will be real easy. You don't have to be a TypeScript dev to understand definitions. Here's what an incomplete definition for TweenLite might look like. It's nearly identical to ActionScript, updated with some ES6 syntax, and looks pretty much like what appears in the current docs.

declare class TweenLite {
  constructor(target: any, duration: number, vars: object);
  static set(target: any, vars: object): TweenLite;
  static to(target: any, duration: number, vars: object): TweenLite;
}

And testing is real easy. Just write some code to see if works. Using an editor like WebStorm, VS Code, or Visual Studio will instantly show you any errors. Whoever created the new set of definitions only tested TweenLite. Had they tested TweenMax, they would have seen the error I mentioned above.

 

EpQhqGs.png

 

 

.

  • Like 1
Link to comment
Share on other sites

Sure, Blake, if you want to create the files based on the current version I'm willing to toss it up on a new repo with some disclaimers about support. If it'd help some folks and doesn't require much of an investment (especially longer-term), I'm up for giving it a shot. 

  • Like 1
Link to comment
Share on other sites

As long as GSAP's API remains stable, it won't require a lot of work to maintain.

 

But it's definitely a good investment. If more people knew about TypeScript, you'd have less issues like this one, and @PointC would have a smaller box of dimes. It understands your code, so it will immediately point out any errors, like a misspelled property.

 

IIK6ny4.png

 

 

And the definitions are not just for TypeScript users. Some editors like WebStorm and VS Code can use TypeScript definitions with regular JavaScript files. It won't show errors like in a TypeScript file, but the type information will show up in the autoComplete, with a little description and any JSDoc comments.

 

CPD5Ufu.png

 

 

 

 

 

.

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

The definition DefinitelyTyped/tree/master/gsap are completely unusable.  Typescript is gaining a lot of momentum and in the long run you'll lose sales if you're not providing them.  It may be an hassle but it's the price to pay to be up to date with the community.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I'm planning buy a license for my projects, but I'm Angular 4 developer (and typescript).  After reading this I will wait for a better solution.

Link to comment
Share on other sites

Yeah same. Angular 4 and typescript throughout our org. We were considering GSAP but the future does not look very bright.

Link to comment
Share on other sites

Sorry everybody. This is high on my todo list, and will get to it once I find some free time. In the meantime, here's the old definitions. Yes, they're incomplete, but at least they're usable.

 

// Type definitions for GreenSock Animation Platform 1.15.1
// Project: http://www.greensock.com/get-started-js/
// Definitions by: Robert S <https://github.com/codebelt>
// Definitions: https://github.com/borisyankov/DefinitelyTyped

// JavaScript Docs http://api.greensock.com/js/
// Version 1.15.1 (TypeScript 1.4)

interface IDispatcher {
    addEventListener(type:string, callback:Function, scope?:Object, useParam?:boolean, priority?:number):void;
    removeEventListener(type:string, callback:Function):void;
}

declare type Tween = TweenLite | TweenMax;
declare type Timeline = SimpleTimeline | TimelineLite | TimelineMax;

//com.greensock.core
declare class Animation {
    static ticker: IDispatcher;
    data: any;
    timeline: SimpleTimeline;
    vars: Object;

    constructor(duration?: number, vars?: Object);

    delay(): number;
    delay(value: number): Animation;
    duration(): number;
    duration(value: number): Animation;
    eventCallback(type: string): Function;
    eventCallback(type: string, callback: Function, params?: any[], scope?: any): Animation;
    invalidate(): Animation;
    isActive(): boolean;
    kill(vars?: Object, target?: Object): Animation;
    pause(atTime?: any, suppressEvents?: boolean): Animation;
    paused(): boolean;
    paused(value: boolean): Animation;
    play(from?: any, suppressEvents?: boolean): Animation;
    progress(): number;
    progress(value: number, supressEvents?: boolean): Animation;
    restart(includeDelay?: boolean, suppressEvents?: boolean): Animation;
    resume(from?: any, suppressEvents?: boolean): Animation;
    reverse(from?: any, suppressEvents?: boolean): Animation;
    reversed(): boolean;
    reversed(value: boolean): Animation;
    seek(time: any, suppressEvents?: boolean): Animation;
    startTime(): number;
    startTime(value: number): Animation;
    time(): number;
    time(value: number, suppressEvents?: boolean): Animation;
    timeScale(): number;
    timeScale(value: number): Animation;
    totalDuration(): number;
    totalDuration(value: number): Animation;
    totalProgress(): number;
    totalProgress(value: number): Animation;
    totalTime(): number;
    totalTime(time: number, suppressEvents?: boolean): Animation;
}

declare class SimpleTimeline extends Animation {
    autoRemoveChildren: boolean;
    smoothChildTiming: boolean;

    constructor(vars?: Object);

    add(value: any, position?: any, align?: string, stagger?: number): SimpleTimeline;
    render(time: number, suppressEvents?: boolean, force?: boolean): void;
}

//com.greensock
declare class TweenLite extends Animation {
    static defaultEase: Ease;
    static defaultOverwrite: string;
    static selector: any;
    target: Object;

    constructor(target: Object, duration: number, vars: Object);

    static delayedCall(delay: number, callback: Function, params?: any[], scope?: any, useFrames?: boolean): TweenLite;
    endTime(includeRepeats?: boolean): number;
    static from(target: Object | Object[], duration: number, vars: Object): TweenLite;
    static fromTo(target: Object | Object[], duration: number, fromVars: Object, toVars: Object): TweenLite;
    static getTweensOf(target: Object, onlyActive: boolean): Tween[];
    static killDelayedCallsTo(func: Function): void;
    static killTweensOf(target: Object, onlyActive?: boolean, vars?: Object): void;
    static lagSmoothing(threshold: number, adjustedLag: number): void;
    static set(target: Object, vars: Object): TweenLite;
    static to(target: Object, duration: number, vars: Object): TweenLite;
}

declare class TweenMax extends TweenLite {
    constructor(target: Object, duration: number, vars: Object);

    static delayedCall(delay: number, callback: Function, params?: any[], scope?: Object, useFrames?: boolean): TweenMax;
    static from(target: Object, duration: number, vars: Object): TweenMax;
    static fromTo(target: Object, duration: number, fromVars: Object, toVars: Object): TweenMax;
    static getAllTweens(includeTimelines?: boolean): Tween[];
    static getTweensOf(target: Object): Tween[];
    static isTweening(target: Object): boolean;
    static killAll(complete?: boolean, tweens?: boolean, delayedCalls?: boolean, timelines?: boolean): void;
    static killChildTweensOf(parent: any, complete?: boolean): void;
    static killDelayedCallsTo(func: Function): void;
    static killTweensOf(target: Object, vars?: Object): void;
    static pauseAll(tweens?: boolean, delayedCalls?: boolean, timelines?: boolean): void;
    repeat(): number;
    repeat(value: number): TweenMax;
    repeatDelay(): number;
    repeatDelay(value: number): TweenMax;
    static resumeAll(tweens?: boolean, delayedCalls?: boolean, timelines?: boolean): void;
    static set(target: Object, vars: Object): TweenMax;
    static staggerFrom(targets: any, duration: number, vars: Object, stagger: number, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteAllScope?: any): any[];
    static staggerFromTo(targets: any, duration: number, fromVars: Object, toVars: Object, stagger: number, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteAllScope?: any): any[];
    static staggerTo(targets: any, duration: number, vars: Object, stagger: number, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteAllScope?: any): any[];
    static to(target:Object, duration:number, vars:Object):TweenMax;
    updateTo(vars: Object, resetDuration?: boolean): TweenMax;
    yoyo(): boolean;
    yoyo(value?: boolean): TweenMax;
}

declare class TimelineLite extends SimpleTimeline {
    constructor(vars?: Object);

    add(value: any, position?: any, align?: string, stagger?: number): TimelineLite;
    addLabel(label: string, position: any): TimelineLite;
    addPause(position?: any, callback?: Function, params?: any[], scope?: any): TimelineLite;
    call(callback: Function, params?: any[], scope?: any, position?: any): TimelineLite;
    clear(labels?: boolean): TimelineLite;
    endTime(includeRepeats?: boolean): number;
    static exportRoot(vars?: Object, omitDelayedCalls?: boolean): TimelineLite;
    from(target: Object, duration: number, vars: Object, position?: any): TimelineLite;
    fromTo(target: Object, duration: number, fromVars: Object, toVars: Object, position?: any): TimelineLite;
    getChildren(nested?: boolean, tweens?: boolean, timelines?: boolean, ignoreBeforeTime?: number): Tween | Timeline[];
    getLabelTime(label: string): number;
    getTweensOf(target: Object, nested?: boolean): Tween[];
    recent(): Animation;
    remove(value: any): TimelineLite;
    removeLabel(label: string): any;
    set(target: Object, vars: Object, position?: any): TimelineLite;
    shiftChildren(amount: number, adjustLabels?: boolean, ignoreBeforeTime?: number): TimelineLite;
    staggerFrom(targets: any, duration: number, vars: Object, stagger?: number, position?: any, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteScope?: any): TimelineLite;
    staggerFromTo(targets: any, duration: number, fromVars: Object, toVars: Object, stagger?: number, position?: any, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteAllScope?: any): TimelineLite;
    staggerTo(targets: any, duration: number, vars: Object, stagger: number, position?: any, onCompleteAll?: Function, onCompleteAllParams?: any[], onCompleteAllScope?: any): TimelineLite;
    to(target: Object, duration: number, vars: Object, position?: any): TimelineLite;
    usesFrames(): boolean;
}

declare class TimelineMax extends TimelineLite {
    constructor(vars?: Object);

    addCallback(callback: Function, position: any, params?: any[], scope?: any): TimelineMax;
    currentLabel(): string;
    currentLabel(value: string): TimelineMax;
    getActive(nested?: boolean, tweens?: boolean, timelines?: boolean): Tween | Timeline[];
    getLabelAfter(time: number): string;
    getLabelBefore(time: number): string;
    getLabelsArray(): any[];
    removeCallback(callback: Function, timeOrLabel?: any): TimelineMax;
    repeat(): number;
    repeat(value: number): TimelineMax;
    repeatDelay(): number;
    repeatDelay(value: number): TimelineMax;
    tweenFromTo(fromPosition: any, toPosition: any, vars?: Object): TweenLite;
    tweenTo(position: any, vars?: Object): TweenLite;
    yoyo(): boolean;
    yoyo(value: boolean): TimelineMax;
}

//com.greensock.easing
interface Back {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Bounce {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Circ {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Cubic {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Ease {
    getRatio(p:number):number;
}
interface EaseLookup {
    find(name:string):Ease;
}
interface Elastic {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Expo {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Linear {
    ease:Linear;
    easeIn:Linear;
    easeInOut:Linear;
    easeNone:Linear;
    easeOut:Linear;
}
interface Power0 {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Power1 {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Power2 {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Power3 {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Power4 {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Quad {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Quart {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Quint {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface Sine {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}
interface SlowMo {
    ease:SlowMo;

    new (linearRatio:number, power:number, yoyoMode:boolean):SlowMo;
    config(linearRatio:number, power:number, yoyoMode:boolean):SlowMo;
    getRatio(p:number):number;
}
interface SteppedEase {
    config(steps:number):SteppedEase;
    getRatio(p:number):number;
}
interface Strong {
    easeIn:Ease;
    easeInOut:Ease;
    easeOut:Ease;
}

//com.greensock.plugins
interface BezierPlugin extends TweenPlugin {
    bezierThrough(values:any[], curviness?:number, quadratic?:boolean, correlate?:string, prepend?:Object, calcDifs?:boolean):Object;
    cubicToQuadratic(a:number, b:number, c:number, d:number):any[];
    quadraticToCubic(a:number, b:number, c:number):Object;
}
interface ColorPropsPlugin extends TweenPlugin {

}
interface CSSPlugin extends TweenPlugin {

}
interface CSSRulePlugin extends TweenPlugin {
    getRule(selector:string):Object;
}
interface EaselPlugin extends TweenPlugin {

}
interface RaphaelPlugin extends TweenPlugin {

}
interface RoundPropsPlugin extends TweenPlugin {

}
interface ScrollToPlugin extends TweenPlugin {

}
interface TweenPlugin {
    activate(plugins:any[]):boolean;
}

//com.greensock.easing
declare var Back:Back;
declare var Bounce:Bounce;
declare var Circ:Circ;
declare var Cubic:Cubic;
declare var Ease:Ease;
declare var EaseLookup:EaseLookup;
declare var Elastic:Elastic;
declare var Expo:Expo;
declare var Linear:Linear;
declare var Power0:Power0;
declare var Power1:Power1;
declare var Power2:Power2;
declare var Power3:Power3;
declare var Power4:Power4;
declare var Quad:Quad;
declare var Quart:Quart;
declare var Quint:Quint;
declare var Sine:Sine;
declare var SlowMo:SlowMo;
declare var SteppedEase:SteppedEase;
declare var Strong:Strong;

//com.greensock.plugins
declare var BezierPlugin:BezierPlugin;
declare var ColorPropsPlugin:ColorPropsPlugin;
declare var CSSPlugin:CSSPlugin;
declare var CSSRulePlugin:CSSRulePlugin;
declare var EaselPlugin:EaselPlugin;
declare var RaphaelPlugin:RaphaelPlugin;
declare var RoundPropsPlugin:RoundPropsPlugin;
declare var ScrollToPlugin:ScrollToPlugin;
declare var TweenPlugin:TweenPlugin;

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

Hi Blake, I was wondering if an updated version of these is around now?

 

Cheers

Link to comment
Share on other sites

Hi @glinkot

 

I'm working on getting a new set of definitions ready, and they will be included as part of the GSAP package so you won't have to do an additional install. We can send out some type of announcement when they are ready.

 

Here's the GitHub issue.

https://github.com/greensock/GreenSock-JS/issues/231

 

  • Thanks 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×