Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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:

  1. //old way (without plugin):
  2. gsap.to(pixiObject.scale, {duration: 1, x: 2, y: 1.5});
  3. gsap.to(pixiObject.skew, {duration: 1, x: 30 * Math.PI / 180});
  4. gsap.to(pixiObject, {duration: 1, rotation: 60 * Math.PI / 180});
  5. //new way (with plugin):
  6. 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:

  1. import * as PIXI from "pixi.js";
  2. import { PixiPlugin } from "gsap/PixiPlugin";
  3. 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%)".

  1. //named colors
  2. gsap.to(graphics, {duration: 2, pixi: {lineColor: "purple"}});
  3. //relative hsl() color that reduces brightness but leaves the hue and saturation the same:
  4. 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).

  1. var image = new PIXI.Sprite.from("http://pixijs.github.io/examples/required/assets/panda.png");
  2. app.stage.addChild(image);
  3. var tl = gsap.timeline({defaults: {duration: 2}});
  4. //colorize fully red. Change colorAmount to 0.5 to make it only halfway colorized, for example:
  5. tl.to(image, {pixi: { colorize: "red", colorizeAmount: 1 } })
  6. //change the hue 180 degrees (opposite)
  7. .to(image, { pixi: { hue: 180 } })
  8. //completely desaturate
  9. .to(image, { pixi: { saturation: 0 } })
  10. //blow out the brightness to double the normal amount
  11. .to(image, { pixi: { brightness: 2 } })
  12. //increase the contrast
  13. .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:

  1. var filter = new PIXI.filters.ColorMatrixFilter();
  2. filter.sepia();
  3. 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.

  1. //blur on both the x and y axis to a blur amount of 15
  2. 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.

Methods

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.
×