PixiPlugin

Description

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 and designers. PixiPlugin saves you a bunch of headaches:

//old way (without plugin):
gsap.to(pixiObject.scale, {duration: 1, x: 2, y: 1.5});
gsap.to(pixiObject.skew, {duration: 1, x: 30 * Math.PI / 180});
gsap.to(pixiObject, {duration: 1, rotation: 60 * Math.PI / 180});
//new way (with plugin):
gsap.to(pixiObject, {duration: 1, pixi: {scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60}});

Notice rotational values are defined in degrees, not radians.

Be sure to include the PixiPlugin correctly:

import * as PIXI from "pixi.js";
import { PixiPlugin } from "gsap/PixiPlugin";
PixiPlugin.registerPIXI(PIXI);

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%)", or 0xFF0000. You can even do relative HSL values! "hsl(+=180, +=0%, +=0%)".

//named colors
gsap.to(graphics, {duration: 2, pixi: {lineColor: "purple"}});
//relative hsl() color that reduces brightness but leaves the hue and saturation the same:
gsap.to(graphics, {duration: 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 = gsap.timeline({defaults: {duration: 2}});
//colorize fully red. Change colorAmount to 0.5 to make it only halfway colorized, for example:
tl.to(image, {pixi: { colorize: "red", colorizeAmount: 1 } })
//change the hue 180 degrees (opposite)
  .to(image, { pixi: { hue: 180 } })
//completely desaturate
  .to(image, { pixi: { saturation: 0 } })
//blow out the brightness to double the normal amount
  .to(image, { pixi: { brightness: 2 } })
//increase the contrast
  .to(image, { 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();
gsap.to(image, {duration: 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
gsap.to(image, {duration: 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.