PixiPlugin makes it much easier to animate things in PixiJS, a popular canvas library that's extremely performant. Without the plugin, it's a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you a bunch of headaches:
//old way (without plugin):
TweenMax.to(pixiObject.scale, 1, {x:2, y:1.5});
TweenMax.to(pixiObject.skew, 1, {x:30 * Math.PI / 180});
TweenMax.to(pixiObject, 1, {rotation:60 * Math.PI / 180});
//new way (with plugin):
TweenMax.to(pixiObject, 1, {pixi:{scaleX:2, scaleY:1.5, skewX:30, rotation:60}});
Notice rotational values are defined in degrees, not radians.
Colors
PixiJS requires that you define color-related values in a format like 0xFF0000 but with PixiPlugin, you can define them the same way you would in CSS, like "red" | "#F00" | "#FF0000" | "rgb(255,0,0)" | "hsl(0, 100%, 50%)" | 0xFF0000. You can even do relative HSL values!
"hsl(+=180, +=0%, +=0%)".
//named colors
TweenMax.to(graphics, 2, {pixi:{lineColor:"purple"}});
//relative hsl() color that reduces brightness but leaves the hue and saturation the same:
TweenMax.to(graphics, 2, {pixi:{fillColor:"hsl(+=0, +=0%, -=30%)"}});
ColorMatrixFilter
Another big convenience is that PixiPlugin recognizes some special values like saturation, brightness, contrast, hue, and colorize (which all leverage a ColorMatrixFilter under the hood).
var image = new PIXI.Sprite.from("http://pixijs.github.io/examples/required/assets/panda.png");
app.stage.addChild(image);
var tl = new TimelineMax();
//colorize fully red. Change colorAmount to 0.5 to make it only halfway colorized, for example:
tl.to(image, 2, { pixi: { colorize:"red", colorizeAmount:1 } })
//change the hue 180 degrees (opposite)
.to(image, 2, { pixi: { hue:180 } })
//completely desaturate
.to(image, 2, { pixi: { saturation:0 } })
//blow out the brightness to double the normal amount
.to(image, 2, { pixi: { brightness: 2 } })
//increase the contrast
.to(image, 2, { pixi: { contrast: 1.5 } })Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter property and it'll handle animating between states:
var filter = new PIXI.filters.ColorMatrixFilter();
filter.sepia();
TweenMax.to(image, 2, { pixi: { colorMatrixFilter: filter } });
BlurFilter
PixiPlugin recognizes blur, blurX, and blurY properties, so it's very simple to apply a blur without having to create a new BlurFilter instance, add it to the filters array, and animate its properties separately.
//blur on both the x and y axis to a blur amount of 15
TweenMax.to(image, 2, { pixi: { blurX: 15, blurY: 15 } });Other properties
PixiPlugin can handle almost any other property as well - there is no pre-determined list of "allowed" properties. PixiPlugin simply improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production.