Jump to content


TypeScript: extend GSAP classes with custom methods and add typings

Go to solution Solved by StGewehr,

Recommended Posts



I feel that it would be very handy, if I can extend the prototype of gsap.core.Timeline, and add TypeScript typings for these extension methods.

For example, this way I can add typing for the "effects" (with extendTimeline = true).
Or, like the "deepKill" method that was suggested by @Greensock.


Here's what I'm trying to do:



Are there any proper way? That "deepKill" call on the left should be "yellow" if it is caught by TS typing system.


Thank you!

Link to comment
Share on other sites

It's very easy to extend. Just create a typings file, like typings.d.ts, and then add whatever. For example, an effect might look like this.


declare namespace gsap.core {

  interface Timeline {

    // Effect
    explode(target: TweenValue, config?: object): this;


  • Like 3
Link to comment
Share on other sites

  • Solution

Hi @OSUblake !


My thanks for quick response. Actually, I was very close, I just split declaration and addition of a method to prototype into different files, and it works fine.

So it should look something like this (perhaps for those who find this topic).


//some index.ts

/// <reference path="./utils/extensions/gsap.d.ts"/>
import "./utils/extensions/gsap.extensions";

declare namespace gsap.core {
  export interface Timeline {
    deepKill(): void;

import { gsap } from "gsap";

gsap.core.Timeline.prototype.deepKill = function () {
  this.getChildren(true, true, true).forEach((animation) => animation.kill());




  • Haha 1
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.