PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was 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 the headaches:
//old way (without plugin): gsap.to(pixiObject.scale, {x: 2, y: 1.5}); gsap.to(pixiObject.skew, {x: 30 * Math.PI / 180}); gsap.to(pixiObject, {rotation: 60 * Math.PI / 180}); //new way (with plugin): gsap.to(pixiObject, {pixi:{scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60}});
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%)"
. 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). Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter
property and it'll handle animating between states.
Lastly, 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. PixiPlugin significantly improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production. See the docs for details. To learn how to include PixiPlugin into your project, see the GSAP install docs.
- 1
- 1
Recommended Comments
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now