Jump to content


Added in version: 1.20.0

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.


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%)"}});


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");

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();
TweenMax.to(image, 2, { pixi: { colorMatrixFilter: filter } });


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.


parseColor( color:string | number, format:string ) : array | number

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.