How to use GSAP PixiPlugin with Typescript and webpack

[hanesjw 2 Likes (Newbie)]

I can't seem to get PixiPlugin to function in my typescript application. Do I need to do anything specific to use PixiPlugin or does it come with the gsap npm install? I wasn't able to find an npm package for the pixiplugin so I assumed it came with the gsap install. I have the latest and greatest version of GSAP but can't get this to function.

 

TweenLite.to(someSprite, 1, {pixi:{colorize:"red", colorizeAmount:1}});

 

 

I'm using Pixi5 and Gsap 2.1.3

 

What am i missing?

 

Thanks!

Quote

 

[OSUblake 9,990 Likes (Superhero)]

It doesn't come with "gsap". See if this works.

 

import "gsap/PixiPlugin";

 

[hanesjw 2 Likes (Newbie)]

Thank you for the reply. After adding that import I'm getting a 'cannot read DisplayObject of undefined' in the PixiPlugin.js file error in the console. I'm using this on a PIXI.Sprite. Is that now how it works? Thanks for the help!

[OSUblake 9,990 Likes (Superhero)]

I haven't had chance to use v5 yet, so I don't know what's going on, but I saw this issue on GitHub.

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

 

[GreenSock 8,117 Likes (Superhero)]

For the record, the latest version of PixiPlugin does have a registerPIXI() static method that you can utilize for this. It was added in GSAP 2.1.3. 

[hanesjw 2 Likes (Newbie)]

Thank you for all the help. I think I'm getting there. I'm still having an issue importing the PixiPlugin though. Do the typings need updating? I've installed @types/gsap and don't see any reference to the PixiPlugin in there. I see it in the node_modules/gsap folder but not the @types/gsap folder. I feel like I'm missing something.

 

I'm trying to use PixiPlugin.registerPIXI(PIXI) but it can't find PixiPlugin since i'm unable to import it even with 'import "gsap/PixiPlugin"'

 

Any ideas?

 

[hanesjw 2 Likes (Newbie)]

Cancel that. I think I found the solution in a separate thread I imported using this 'import PixiPlugin from 'gsap/PixiPlugin'

and it all seems to work now. Thanks again for all the help!!!

 

Edit: as a side note I had to disable the noImplicitAny option in my tsconfig.json to allow it to compile. I still get this warning though:

 

Could not find a declaration file for module 'gsap/PixiPlugin'. 'c:/Users/llc/node_modules/gsap/PixiPlugin.js' implicitly has an 'any' type.
If the 'gsap' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap`ts(7016)

[OSUblake 9,990 Likes (Superhero)]

Pixi is on the window, TypeScript just doesn't know it.

 

Just declare the plugin.

 

declare var PixiPlugin;

 

[hanesjw 2 Likes (Newbie)]

Ok perfect. That seemed to work. So to summarize this is how it was all pieced together. This is without needing to disable the noImplicite any option also.

 

import 'gsap/PixiPlugin';
declare var PixiPlugin: any;
PixiPlugin.registerPIXI(PIXI);

 

 

Thanks again for all the help!

[hanesjw 2 Likes (Newbie)]

I'm back. This worked up until I did a production build using webpack. I get a console error saying 'PixiPlugin is undefined'. I'm assuming the tree shaking is the culprit but I can't seem to find a workaround...

[GreenSock 8,117 Likes (Superhero)]

3 hours ago, hanesjw said:

I'm back. This worked up until I did a production build using webpack. I get a console error saying 'PixiPlugin is undefined'. I'm assuming the tree shaking is the culprit but I can't seem to find a workaround...

 

Yeah, it's probably tree shaking. All you need to do (most likely) is reference PixiPlugin somewhere in your code, like:

 

const plugins = [PixiPlugin]; //feel free to add other plugins to the array. 

 

Good luck with the project. ?

[OSUblake 9,990 Likes (Superhero)]

See if this works. 

 

import { PixiPlugin } from 'gsap/PixiPlugin';
declare var PixiPlugin: any;
const plugins = [PixiPlugin];
PixiPlugin.registerPIXI(PIXI);

 

 

I honestly don't why that would make a difference unless WebPack has changed, or maybe your config is a little different. 

 

Can you send me a simplified version of your project? I'm curious to see why it's being dropped.