Animating filters in Pixi.js (setup)

In a previous blog, I had written about how to animate RGB shift using PixiJs’s filters feature. Today I will be going through how to set up a Pixi app from scratch to animate these features in React.

Start with installing it through your preferred package manager.

npm install pixi-filtersoryarn add pixi-filters

In the PixiJS docs, you’ll find the filters that you’re looking for and import it in your react app.

import { RadialBlurFilter, ReflectionFilter, RGBSplitFilter, TwistFilter } from "pixi-filters";

For my application that I built recently, I used these four filters.

Now that you’ve imported the library, you’ll want to start by creating a function to initialize a new pixi app instance.

initPixi = () => {
this.pixiapp = new PIXI.Application({
width: bgwidth, height: window.innerHeight,
});

Next you’ll want to create to add content to your Pixi application using Pixi.Loader. Docs for Pixi.Loader

const imageURL = your_image
this.pixiapp.loader.add('image',imageURL).load((loader, resources) => {
this.image = PIXI.Sprite.from(resources.image.url); this.image.width = bgwidth;
this.setState({ currentImage: this.imageURL })

The next step is important as I was unable to find docs for this. To get your Pixi app to render you should include in your render:

<div style={{ width: `${bgwidth}px`,height: '100%', 
position: 'absolute', }}
ref={node => { this.pixiNode = node }}></div>

This should get you started. To remove the filters use pixiapp.destroy() or this.pixiNode.removeChild to remove an effect. Have fun! Please let me know if you run into any problems. I will be releasing these filters separately on codepen in the future.