GreenSock Docs (HTML5/JS)

PixiPlugin

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.

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.fromImage("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.


Methods

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.

Get GSAP

Version: 2.0.1 updated 2018-05-30

Core

    Extras

      Plugins

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

        Help support GreenSock by becoming a member

        Join Club GreenSock