Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NoahRodenbeek

How to import Club plugins with TypeScript

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

I've got vanilla GSAP running with `yarn add gsap @types/gsap`, but I cannot figure out how to import the DrawSVG plugin. I've manually added it into a sibling directory called "_vendor/gsap" but the `import` just isn't working for me.

 

I tried adding DrawSVG to the @types/gsap file and that made the errors go away but drawSVG still isn't doing anything.

 

/** component.ts file */

import * as GSAP from 'gsap';

var trace = new GSAP.TimelineLite({ repeat: 0 });

trace
  .fromTo($element, 6, {
    drawSVG: '0% 0%'
  }, {
    drawSVG: '0% 100%',
    ease: GSAP.Expo.easeInOut
  };

 

Could be I've just been staring at this too long and not seeing something obvious. I found some good resources for base-model GSAP integration with TypeScript, but nothing about the paid tier plugins.

 

Link to comment
Share on other sites

Hi @NoahRodenbeek

 

Try importing plugins like this

 

import { TimelineLite } from "gsap"
import * as DrawSVGPlugin from "./somepath/DrawSVGPlugin"

 

 

  • Like 1
Link to comment
Share on other sites

Thank you so much for the fast and awesome reply!

 

So I think this is the right track for sure, but my @types/gsap file must not be covering the right bases. Now I get this error:

 

"error TS7016: Could not find a declaration file for module '../_vendor/gsap/DrawSVGPlugin'. '../_vendor/gsap/DrawSVGPlugin' implicitly has an 'any' type."

 

I added this to the @types/gsap file:

 

interface DrawSVGPlugin extends TweenPlugin {
    
}

...

declare var DrawSVGPlugin:DrawSVGPlugin;

 

I just copied the BezierPlugin syntax, but maybe this isn't the right place to do it? There's a lot about TypeScript I still don't get :\

Link to comment
Share on other sites

32 minutes ago, NoahRodenbeek said:

There's a lot about TypeScript I still don't get :\

 

Yeah, getting started with TypeScript can be frustrating because you're bound to run into compiler errors from other libraries.

 

Can you send me your project or reduced version of what your working with? You can send it in PM if you don't want to post it. If I can see how you have things setup, like with your tsconfig, I can put you on the right track. Right now TypeScript support for GSAP is a little sketchy, but we're working on it.

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

 

 

  • Like 3
Link to comment
Share on other sites

Cool. I'll look at it later today. And you're using Vue, which is something else I need to look into. Some people have been having problems installing plugins with that.

 

 

25 minutes ago, NoahRodenbeek said:

I've been plug-n-playing things as I go along and had a lot of success. Even with base GSAP, once I got @types/gsap loaded in it was a snap. DrawSVG is stumping me because it's invoked as a config property rather than a stand alone class, so I'm not sure how it's supposed to fit into the type cast eco system.

 

When you import the class, it should automatically add it to GSAP, so the usage is still the same.

import { TweenLite } from "gsap"
import * as DrawSVGPlugin from "./somepath/DrawSVGPlugin"

TweenLite.to(myElement, 1, { drawSVG: "50%" });

 

The only reason you would ever need to actually touch the class is to access a couple static methods.

 

One more thing, can you remove the paid plugins from that repo? Just so other people don't snag them. Thanks.

 

  • Like 2
Link to comment
Share on other sites

Sorry, good call, didn't even think about that. GSAP removed and .gitignore'ed.

 

I'm attaching the proof of concept I made beforehand. This is what I'm converting to teach myself TypeScript.

 

The other GSAP stuff is working good in Vue. The Timeline runs, the final `.to()` fires fine, it's just the DrawSVG stuff gets skipped.

 

Thanks again for your help!

 

 

See the Pen jaWbRJ by nominalaeon (@nominalaeon) on CodePen

 

Link to comment
Share on other sites

Updated my repo, I found a solution that I'm comfortable with but might not be satisfying to future troubleshooters.

 

If I load GSAP from my index.html instead of TypeScript's import, it works great! It still requires @types/gsap to run but I don't get any type errors and the DrawSVG functionality is clicking along.

 

I'd still be interested in helping find a TS-friendly solution, but I'm not in any dire straits for the moment.

  • Like 1
Link to comment
Share on other sites

I didn't forget about you. I'm waiting to hear back on a Vue issue that was discovered in this thread. For some reason, some plugins are being incorrectly imported.

 

 

 

 

  • Thanks 1
Link to comment
Share on other sites

No worry at all! Honestly, the more I thought about it, I think I prefer to load in GSAP separately. Aside from alleviating the TS import headache, it lets me lean on the cdn call for the base stuff which will be lightning fast for anyone who's gone pretty much anywhere on the internet before hitting my web app.

 

Unrelated: for `@types/gsap` I had to add some stuff to RoughEase to make RoughEaseConfig work.

 

declare class RoughEase extends Ease {
    public static ease: RoughEase;
    constructor(vars: RoughEaseConfig);
    public config(steps: number): SteppedEase;
    public config(vars: RoughEaseConfig): RoughEase; /** allows `ease: RoughEase.ease.config(configRoughEase)` */
}

 

...someday I'll get around to submitting a PR for it

 

  • Like 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.
×