Jump to content
Search Community

PixiPlugin webpack

spassvogel test
Moderator Tag

Recommended Posts

Another webpack question I'm afraid. I found several topics already but can't make it work.

 

My stack: typescript webpack babel, in fact I'm using `create-react-app` with typescript template. I installed `npm i gsap --save`

Importing as such
 

import * as PIXI from 'pixi.js';
import { TweenMax } from 'gsap';
import { PixiPlugin } from 'gsap/all';
import { gsap } from 'gsap'


PixiPlugin.registerPIXI(PIXI);
gsap.registerPlugin(PIXI); // just to be sure?



Then in my code

 

        TweenMax.from(ref.current, 1, { pixi: { scaleX: .2, scaleY: 0.2, rotation:60}});

Unfortunately gives this error

 

image.png.ac3af0eb7b15e326f209b344a16c8650.png

 

 

🤔

Link to comment
Share on other sites

Hard to say without seeing your project. Can you make simple repo showing the problem?

 

Also, you should be consistent with your imports and syntax. There is no need to use TweenLite/Max or TimelineLite/Max anymore.

 

import * as PIXI from 'pixi.js';
import { gsap } from 'gsap'
import { PixiPlugin } from 'gsap/PixiPlugin';

gsap.registerPlugin(PixiPlugin); 
PixiPlugin.registerPIXI(PIXI);

gsap.from(ref.current, { 
  duration: 1, 
  pixi: { 
    scale: 0.2, 
    rotation:60 
  }
});

 

Please follow the installation instructions.

https://greensock.com/docs/v3/Installation

 

And the migration guide.

 

 

  • Like 1
Link to comment
Share on other sites

42 minutes ago, OSUblake said:

 There is no need to use TweenLite/Max or TimelineLite/Max anymore.
 

 

 

Okay I must have read that in a forum post somewhere. Probably the documentation is a more sensible place to start. Thanks again.

Link to comment
Share on other sites

1 minute ago, spassvogel said:

Okay I must have read that in a forum post somewhere. Probably the documentation is a more sensible place to start. Thanks again.

 

Yeah, that's a problem with finding answers on the forums. Most stuff posted before 2020 is going show the older syntax.

Link to comment
Share on other sites

  • 1 month later...

Hi Blake, I'm new to GSAP and really enjoying the power that comes with it!

I am working on a PIXI typescript/webpack project as well and in tweening the scaleX and scaleY properties, I am getting the same error as @spassvogel, despite having imported the packages in the manner you suggested above:

import * as PIXI from 'pixi.js';

import { gsap } from 'gsap';

import { PixiPlugin } from 'gsap/PixiPlugin';

gsap.registerPlugin(PixiPlugin);

PixiPlugin.registerPIXI(PIXI);

The error I am getting is:
 

Invalid property scaleX set to 0 Missing plugin? gsap.registerPlugin()

I am calling the Tween like this in my code:

gsap.to(this.connectorLine, {

scaleX: 0,

alpha: 0,

duration: 0.5,

});

(Where this.connectorLine is a PIXI.Sprite)

 

I have been puzzling over this over the better part of two days, and I am at a loss as to what the issue might be.

One thing that strikes me as fishy is that despite using Typescript, my code editor (VS Code), doesn't provide any code hinting for the imported PixiPlugin and shows no method called registerPIXI in the namespace. (In fact, it shows no methods or member variables at all). 


Importing the PixiPlugin as:
 

import * as PIXIPlugin from 'gsap/PixiPlugin";

and 
 

import PixiPlugin from 'gsap/PixiPlugin'; // Default export


also lead to the same error...

My next course of action is to hack the Sprite class by extending it in order to define scale as a single variable, (since I am scaling equally in x and y, and therefore don't need it to be a point value), but hacks are ugly 🤢 and I'd rather just get the plugin working since that is what it was designed to do!

Thank you for any insights you may be able to provide!

Cheers!

Link to comment
Share on other sites

Hey mmontoya and welcome to the GreenSock forums.

 

I highly suggest console.log()ing what this.connectorLine is when you call the tween to see if it's pointing to what you think it's pointing to.

 

28 minutes ago, mmontoya said:

One thing that strikes me as fishy is that despite using Typescript, my code editor (VS Code), doesn't provide any code hinting for the imported PixiPlugin and shows no method called registerPIXI in the namespace. (In fact, it shows no methods or member variables at all). 

This is because the Typescript declarations in the current version of GSAP are not complete. In the next version of GSAP (to be released soon) more full declaration files are included for all of GSAP and its plugins (though there may be some methods or properties accidentally left out - we could use help finding anything that is missing). 

  • Like 1
Link to comment
Share on other sites

Thank you, Zach!

 

A console.log does indeed show it is of type PIXI.Sprite (so the scale: {x: number, y: number}) property does exists on it.

 

Sprite {_events: Events, _eventsCount: 0, tempDisplayObjectParent: null, transform: Transform, alpha: 1, …}



If I am unable to get to the bottom of this, is there an alternative way to Tween the properties of an array of Sprites?

This currently works, but I would also like to animate the scale.x and scale.y properties together with the alpha:

 

// this.navigationDots is an array of PIXI.Sprites
gsap.to(this.navigationDots, {
	alpha: 0,
  	scaleX: 0, //<-- this fails
	stagger: {
		amount: duration,
		from: 'end',
	},
});

 

Link to comment
Share on other sites

I realized now that you forgot (or didn't know to include) the pixi: {} wrapper for the pixi properties like scaleX. This should work:

gsap.to(this.connectorLine, {
  pixi: {scaleX: 0},
  alpha: 0,
  duration: 0.5,
});

Same thing for the stagger:

gsap.to(this.navigationDots, {
  alpha: 0,
  pixi: {scaleX: 0}, 
  stagger: {
    amount: duration,
    from: 'end',
  },
});

 

Example:

See the Pen RwWvjgJ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thank you so much, Zach!
That was totally it! (I didn't realize the values needed to be wrapped in a pixi object 🙄). 
You're my green-caped hero! 🙂
Thank you, also, for taking the time to provide a CodePen - I have learned so much from them! 
Really loving this community! 😍
 

  • Like 1
Link to comment
Share on other sites

11 hours ago, mmontoya said:

One thing that strikes me as fishy is that despite using Typescript, my code editor (VS Code), doesn't provide any code hinting for the imported PixiPlugin and shows no method called registerPIXI in the namespace. (In fact, it shows no methods or member variables at all). 

 

Oops! I totally forgot about about adding registerPIXI. I'm guessing that created an error for you. What did you do to get around it?

 

As for the props, yeah, we can add some, like the ones gsap handles specifically, but you can put any valid property inside the pixi object, and it will work. So we can't add EVERY single property that will work, just the special ones.

 

11 hours ago, mmontoya said:

My next course of action is to hack the Sprite class by extending it in order to define scale as a single variable, (since I am scaling equally in x and y, and therefore don't need it to be a point value), but hacks are ugly 🤢 and I'd rather just get the plugin working since that is what it was designed to do!

 

I always the extend sprite class when I work on a pixi project. 🤷‍♂️

 

Before gsap's plugin, I would just add methods to the prototype, making it available in all classes that inherit from DisplayObject.

 

PIXI.DisplayObject.prototype.scaleX = function(value) {
  this.scale.x = value;
};

gsap.to(sprite, {
  scaleX: 10
})

 

 

 

Link to comment
Share on other sites

12 hours ago, OSUblake said:

 

Oops! I totally forgot about about adding registerPIXI. I'm guessing that created an error for you. What did you do to get around it?

 

As for the props, yeah, we can add some, like the ones gsap handles specifically, but you can put any valid property inside the pixi object, and it will work. So we can't add EVERY single property that will work, just the special ones.

 

 

I always the extend sprite class when I work on a pixi project. 🤷‍♂️

 

Before gsap's plugin, I would just add methods to the prototype, making it available in all classes that inherit from DisplayObject.

 


PIXI.DisplayObject.prototype.scaleX = function(value) {
  this.scale.x = value;
};

gsap.to(sprite, {
  scaleX: 10
})

 

 

 

Hahaha! Glad to see my instincts were right about extending the Sprite Class... 🙂 

I suppose I'm always a bit wary  of hacking someone else's code because experience has shown me that, unless you really  understand its internals quite well, you're likely going to code yourself into a mess when things start to break (which they always do, as per Murphy's Law) and this can suck untold hours of your time in order to solve, which can be quite nerve-wracking when you've got a deadline!

I am using Typescript , so it's not as easy as adding the extra properties to the prototype object as you might do with vanilla JavaScript.

What I did, was to extend PIXI's Sprite class like this:

export class SpritePlus extends PIXI.Sprite {

	private _active: boolean;

	private _title: string;

	private _XYScale: number;

	constructor(sprite: PIXI.Sprite) {

		super(sprite);

	}

	get active(): boolean {

		return this._active;

	}

	set active(value: boolean) {

		this._active = value;

	}

	get title(): string {

		return this._title;

	}

	set title(value: string) {

		this._title = value;

	}

	set XYScale(value: number) {
		this.scale.x = number;
		this.scale.y = number;
		this._XYScale = number;
    }

	get XYScale():number {
		return this._XYScale;
    }

}

This now allows me to proportionally drive the scale with a single value, since I am always scaling equally in x and y.
Since this is for a UI, the "active" property allows me to identify which element has been clicked, so that I can Tween it to it's "active state".

The "title" property, I use to display the currently selected chapter that is then passed along to a "SceneManager" class.

As for the registerPIXI method - even though it's not in the type definitions, as the method is indeed in the class, the Typescript transpiler doesn't throw an error, so while I don't have code-hinting, it still works when I build the project. 🙂

Thank you for all your hard work! I am greatly enjoying digging through the GSAP docs! Today it's the GSAP Timeline Class, tomorrow... the world!  😉

  • Like 3
Link to comment
Share on other sites

On 5/22/2020 at 9:09 AM, ZachSaucier said:

Do you happen to have or want to make a list of these? I'm happy to add them.

 

Just a quick glance at the source code:

 

x, y, tileX, tileY, rotation, angle, autoAlpha

colorMatrixFilter, saturation, contrast, hue, colorize, colorizeAmount, brightness, combineCMF, blurPadding

tint, lineColor, fillColor

 

These will be the [name], [name]X, [name]Y i.g. skew, skewX, skewY

position, scale, skew, pivot, anchor, tilePosition, tileScale, blur

 

I think it would be helpful to add those properties to the docs. I forgot that some of those existed. And maybe @GreenSock can verify that list. It's not like all the props are in one place, so I might have missed some.

 

And I guess you could any properties from here that are numbers or strings. I only see a few, like alpha, height, width, zIndex, but I might have missed some.

http://pixijs.download/release/docs/PIXI.DisplayObject.html

 

 

 

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