Jump to content
GreenSock

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

How to use GSAP PixiPlugin with Typescript and webpack

Recommended Posts

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
 
Link to comment
Share on other sites

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

 

import "gsap/PixiPlugin";

 

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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)

  • Like 1
Link to comment
Share on other sites

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

 

Just declare the plugin.

 

declare var PixiPlugin;

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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...

Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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.

 

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