Creating popular web animations with PIXI.js
DateMay 18, 2020
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.
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.
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
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.