Popular Web Animations with PIXI.js

#engineeringmonday #pixijs #webgl #animations

The trend

Starting in 2018 and growing in popularity in 2019, the trend of “liquified” images and video, various distortion effects and glitches still remains very popular in 2020. 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 it interactive we need to use 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 to create interactive experiences in a more straightforward way and in a fragment of time we would spend if going with the "vanilla" approach. Of course, we do recommend to do research on the webGL API, read about it, and learn the core stuff and how it works in essence. 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 also it is very good for adding interaction and effects to web interfaces.

PIXI.js v5

Although we use 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 simplified) from the last version (v4), but in the past two years, a lot of improvements were made from the contributors with a primary focus on performance and speed.

How we use PIXI.js

In general, PIXI.js is a very simple-to-use library, their documentation and examples are all you need to start creating basic stuff like creating various filters and applying predefined effects. Adding interaction and some advanced stuff isn't much more complicated, after all, all of this is Javascript, right? 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 modes intensity, and much more. With the addition of GSAP all these interactions can be an even smoother and richer experience. Combining these two libraries we create all the trendy stuff I mentioned at the start of this article - "liquified" visuals, various distortion effects, and glitches.

Example is worth a 1000 words (or lines of code)

To show the community how we use PIXI.js and how we create various interactions and effects on our projects - we have 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 just leave a comment on what you think.