Jump to content
Search Community

How to use GSAP PixiPlugin with Typescript and webpack

hanesjw test
Moderator Tag

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

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

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

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.
×
×
  • Create New...