GreenSock Docs (HTML5/JS)


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):, 1, {x:2, y:1.5});, 1, {x:30 * Math.PI / 180});, 1, {rotation:60 * Math.PI / 180});

//new way (with plugin):, 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, 2, {pixi:{lineColor:"purple"}});
//relative hsl() color that reduces brightness but leaves the hue and saturation the same:, 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.fromImage("");

var tl = new TimelineMax();
//colorize fully red. Change colorAmount to 0.5 to make it only halfway colorized, for example:, 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();, 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, 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 : 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.


Version: 1.20.3 updated 2017-10-02




        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock