Skip to main content

PixiPlugin.registerPIXI

PixiPlugin.registerPIXI( PIXI:Object ) ;

Registers the main PIXI library object with the PixiPlugin so that it can find the necessary classes/objects. You only need to register it once.

Parameters

  • PIXI: Object

    The main PIXI library object

Details​

PixiPlugin needs some reference to the PIXI library object (usually PIXI), which it looks for in the global scope (window in most cases). However in a build system or ES module environment you might not have a global scope that has a reference to your PIXI object. That's where this method is useful. You can simply pass in that reference using this method like:

PixiPlugin.registerPIXI(PIXI);

When importing the entire Pixi.js library, you can register Pixi like this:

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

gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);

When importing individual Pixi.js modules, you can pass in the plugin's dependencies as an object.

  • DisplayObject: (required)
  • Graphics: (optional) Needed to animate lineColor and fillColor for Graphics objects
  • filters: (optional) Needed to animate ColorMatrixFilter and BlurFilter properties
import { gsap } from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin";

import { DisplayObject } from "@pixi/display";
import { BlurFilter } from "@pixi/filter-blur";
import { ColorMatrixFilter } from "@pixi/filter-color-matrix";

gsap.registerPlugin(PixiPlugin);

PixiPlugin.registerPIXI({
  DisplayObject: DisplayObject,
  Graphics: Graphics,
  filters: {
    BlurFilter: BlurFilter,
    ColorMatrixFilter: ColorMatrixFilter,
  },
});

Contents