Merge pull request #33132 from AdemHodzic/gsap-callback-params-update

Made changes to gsap types.Updated definition for Tween callback property.

types/gsap/Animation.d.ts

@@ -29,8 +29,8 @@ declare namespace gsap {
          * Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any
          * parameters that should be passed to that callback.
          */
-        eventCallback(type: string): () => void;
-        eventCallback(type: string, callback: () => void, params?: any[], scope?: any): Animation;
+        eventCallback(type: string): (...args: any[]) => void;
+        eventCallback(type: string, callback: (...args: any[]) => void, params?: any[], scope?: any): Animation;
 
         /**
          * Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded

types/gsap/Ease.d.ts

@@ -1,6 +1,6 @@
 declare namespace gsap {
     class Ease {
-        constructor(func?: () => void, extraParams?: any[], type?: number, power?: number);
+        constructor(func?: (...args: any[]) => void, extraParams?: any[], type?: number, power?: number);
 
         /** Translates the tween's progress ratio into the corresponding ease ratio. */
         getRatio(p: number): number;

types/gsap/Timeline.d.ts

@@ -31,13 +31,13 @@ declare namespace gsap {
         addLabel(label: string, position: any): TimelineLite;
 
         /** Inserts a special callback that pauses playback of the timeline at a particular time or label. */
-        addPause(position?: any, callback?: () => void, params?: any[], scope?: any): TimelineLite;
+        addPause(position?: any, callback?: (...args: any[]) => void, params?: any[], scope?: any): TimelineLite;
 
         /**
          * Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as
          * add( TweenLite.delayedCall(...) ) but with less code.
          */
-        call(callback: () => void, params?: any[], scope?: any, position?: any): TimelineLite;
+        call(callback: (...args: any[]) => void, params?: any[], scope?: any, position?: any): TimelineLite;
 
         /** Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too). */
         clear(labels?: boolean): TimelineLite;
@@ -106,7 +106,7 @@ declare namespace gsap {
             vars: {},
             stagger?: number,
             position?: any,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteScope?: any
         ): TimelineLite;
@@ -122,7 +122,7 @@ declare namespace gsap {
             toVars: {},
             stagger?: number,
             position?: any,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteAllScope?: any
         ): TimelineLite;
@@ -137,7 +137,7 @@ declare namespace gsap {
             vars: {},
             stagger: number,
             position?: any,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteAllScope?: any
         ): TimelineLite;
@@ -156,14 +156,14 @@ declare namespace gsap {
     class TimelineMax extends TimelineLite {
         constructor(vars?: {});
 
-        addCallback(callback: () => void, position: any, params?: any[], scope?: any): TimelineMax;
+        addCallback(callback: (...args: any[]) => void, 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(): Array<{ name: string; time: number }>;
-        removeCallback(callback: () => void, timeOrLabel?: any): TimelineMax;
+        removeCallback(callback: (...args: any[]) => void, timeOrLabel?: any): TimelineMax;
         removePause(position: any): TimelineMax;
         repeat(): number;
         repeat(value: number): TimelineMax;

types/gsap/Tween.d.ts

@@ -22,7 +22,7 @@ declare namespace gsap {
         static ticker: any;
 
         /** Provides a simple way to call a () => void after a set amount of time (or frames). */
-        static delayedCall(delay: number, callback: () => void, params?: any[], scope?: any, useFrames?: boolean): TweenLite;
+        static delayedCall(delay: number, callback: (...args: any[]) => void, params?: any[], scope?: any, useFrames?: boolean): TweenLite;
 
         /**
          * Static method for creating a TweenLite instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing
@@ -49,7 +49,7 @@ declare namespace gsap {
         invalidate(): TweenLite;
 
         /** Immediately kills all of the delayedCalls to a particular () => void. */
-        static killDelayedCallsTo(func: () => void): void;
+        static killDelayedCallsTo(func: (...args: any[]) => void): void;
 
         /** Kills all the tweens (or specific tweening properties) of a particular object or delayedCalls to a particular () => void. */
         static killTweensOf(target: any, onlyActive?: boolean, vars?: any): void;
@@ -74,7 +74,7 @@ declare namespace gsap {
         constructor(target: {}, duration: number, vars: {});
 
         /** Provides a simple way to call a () => void after a set amount of time (or frames). */
-        static delayedCall(delay: number, callback: () => void, params?: any[], scope?: {}, useFrames?: boolean): TweenMax;
+        static delayedCall(delay: number, callback: (...args: any[]) => void, params?: any[], scope?: {}, useFrames?: boolean): TweenMax;
 
         /**
          * Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for
@@ -110,7 +110,7 @@ declare namespace gsap {
         static killChildTweensOf(parent: any, complete?: boolean): void;
 
         /** Immediately kills all of the delayedCalls to a particular () => void. */
-        static killDelayedCallsTo(func: () => void): void;
+        static killDelayedCallsTo(func: (...args: any[]) => void): void;
 
         /** Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular () => void. */
         static killTweensOf(target: {}, vars?: {}): void;
@@ -144,7 +144,7 @@ declare namespace gsap {
             duration: number,
             vars: {},
             stagger: number,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteAllScope?: any
         ): any[];
@@ -159,7 +159,7 @@ declare namespace gsap {
             fromVars: {},
             toVars: {},
             stagger: number,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteAllScope?: any
         ): any[];
@@ -173,7 +173,7 @@ declare namespace gsap {
             duration: number,
             vars: {},
             stagger: number,
-            onCompleteAll?: () => void,
+            onCompleteAll?: (...args: any[]) => void,
             onCompleteAllParams?: any[],
             onCompleteAllScope?: any
         ): any[];

types/gsap/TweenConfig.d.ts

@@ -23,7 +23,7 @@ declare namespace gsap {
         overwrite?: string | number;
 
         /**  A () => void that should be called when the animation has completed. */
-        onComplete?: () => void;
+        onComplete?: (...args: any[]) => void;
 
         /** An Array of parameters to pass the onComplete () => void */
         onCompleteParams?: any[];
@@ -39,7 +39,7 @@ declare namespace gsap {
         immediateRender?: boolean;
 
         /** A () => void that should be called when the tween has reached its beginning again from the reverse direction. */
-        onReverseComplete?: () => void;
+        onReverseComplete?: (...args: any[]) => void;
 
         /** An Array of parameters to pass the onReverseComplete () => void. */
         onReverseCompleteParams?: any[];
@@ -48,7 +48,7 @@ declare namespace gsap {
         onReverseCompleteScope?: {};
 
         /** A () => void that should be called when the tween begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times). */
-        onStart?: () => void;
+        onStart?: (...args: any[]) => void;
 
         /** An Array of parameters to pass the onStart () => void. */
         onStartParams?: any[];
@@ -57,7 +57,7 @@ declare namespace gsap {
         onStartScope?: {};
 
         /** A () => void that should be called every time the animation updates (on every frame while the animation is active). */
-        onUpdate?: () => void;
+        onUpdate?: (...args: any[]) => void;
 
         /** An Array of parameters to pass the onUpdate () => void. */
         onUpdateParams?: any[];
@@ -81,7 +81,7 @@ declare namespace gsap {
         lazy?: boolean;
 
         /** A () => void that should be called when the tween gets overwritten by another tween. */
-        onOverwrite?: () => void;
+        onOverwrite?: (...args: any[]) => void;
 
         /** If true atuomatically populates the css property for tween on DOM elements */
         autoCSS?: boolean;
@@ -95,7 +95,7 @@ declare namespace gsap {
 
         repeatDelay?: number;
 
-        onRepeat?: () => void;
+        onRepeat?: (...args: any[]) => void;
 
         onRepeatScope?: {};
     }

types/gsap/gsap-tests.ts

@@ -1,11 +1,22 @@
 import { TweenLite, TweenMax } from 'gsap';
 
+const callbackWithoutParams = () => {
+    console.log('I Have No Parameters.');
+};
+
+const callbackWithParams = (...args: any[]) => {
+    console.log('I Have Parameters.');
+    console.log(args);
+};
+
+
 const tweenLiteExample = TweenLite
     .to(document.getElementById('some-div'), 1, {
         width: '200px',
         height: '200px',
         x: '100px',
-        y: '200px'
+        y: '200px',
+        onComplete: callbackWithoutParams
     })
     .seek(0.5);
 
@@ -14,6 +25,8 @@ const tweenMaxExample = TweenMax
     width: '200px',
     height: '200px',
     x: '100px',
-    y: '200px'
+    y: '200px',
+    onComplete: callbackWithParams,
+    onCompleteParams: ['foo', 'bar']
   })
   .seek(0.5);

types/gsap/index.d.ts

@@ -5,6 +5,7 @@
 //                  Richard Fox <https://github.com/ProbablePrime>,
 //                  Philip Bulley <https://github.com/philipbulley>,
 //                  Leonardo Melo <https://github.com/leomeloxp>
+//                  Adem Hodzic <https://github.com/AdemHodzic>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 /// <reference path="Animation.d.ts"/>