[Non-passive Events being called out in newer Chrome]

Yeah, super "helpful". It looks like there's a way to explicitly say `false` to also avoid the warning log, but it might not be worth the effort to work into Draggable.

 

That should really be on Chrome to accept a default value without polluting the console. Thanks for the response!

[Non-passive Events being called out in newer Chrome]

The newer version(s?) of Chrome are logging a warning about event listeners declared without a passive state. It looks harmless for now, I just wondered if there were plans to add this functionality, or if there's an existing option I'm not seeing that I just need to add. So far I'm only noticing it with Draggable.

 

See the Pen JvjLyg by GreenSock (@GreenSock) on CodePen

[How to import Club plugins with TypeScript]

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

 

[How to import Club plugins with TypeScript]

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.

[How to import Club plugins with TypeScript]

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

 

[How to import Club plugins with TypeScript]

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 :\

[How to import Club plugins with TypeScript]

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.