Creating popular web animations with PIXI.js

As designers and creative developers working in Bornfight’s Creative unit, we follow trends and try to integrate them in our day-to-day work, so let’s go over a couple of examples.

The tech

To accomplish the effects I mentioned before and to make them interactive, we need to use the webGL Javascript API. To make the whole process easier and less time-consuming, we tend to use specialized libraries and frameworks that are built upon webGL. Those frameworks and libraries help us create interactive experiences in a way that is more straightforward, but also in a fragment of time we would have spend if we decided to take the “vanilla” approach. Of course, we always recommend to do a bit of research on the webGL API — read about it, learn the key aspects and see how it works in its core.

PIXI.js is the library of choice for us when it comes to creating popular effects and interactions on the web. Of course, PIXI can be used everywhere where rich 2D-animation is required (e.g. game development), but it is also extremely good for adding interaction and effects to web interfaces.

PIXI.js v5

Although we’ve been using PIXI.js for quite some time now, we recommend everyone to start with the latest version. API changed a little bit (we would say it is now simplified) from the last version (v4), but in the past two years, a lot of other improvements were made to the library — with a primary focus on performance and speed.

How we use PIXI.js

In general, PIXI.js is a very simple-to-use library — its documentation and examples are all you need to start creating basic elements such as making various filters and applying predefined effects. Adding interaction and some more advanced aspects isn’t much more complicated either — after all, all of this is still JavaScript.

Adding event listeners on scroll or cursor position can give you values upon which you can change PIXI filter parameters, translate depth maps, tweak blending mode intensity and much more. And with the addition of GSAP, all of these interactions can be turned into an even smoother and richer experience. By combining these two libraries, we can create all of the trendy elements I mentioned at the beginning of this article — “liquified” visuals, various distortion effects and glitches.

An example is worth 1000 words (or lines of code)

To show the community how we use PIXI.js to create various interactions and effects on our projects, we put together a set of examples you can use in your projects. Feel free to download, fork the repo, create a pull request, open an issue, or contact us if you want to know more.

Visit our PIXI.js playground on Github.