I like minimalism, dark mode and at the same time I am in love with animations. If you're looking to grab your website visitor's attention, what can be better than animations? Various website animation effects are really important: thanks to them, any online resource becomes more lively, intriguing, eye-catching... which leads to a great increase in conversions.

It’s one thing to add simple animations that need just one action (for instance, toggling). For this, you can always use simple CSS animations. But, for more complex or advanced effects, JavaScript is a better tool. It goes without saying that using JavaScript to create animations is more challenging than using CSS.

Some of my favourites

I would like to share with you some of my favourite js libraries for animations.

• Pixi JS is a wonderful library offering a fast and simple rendering engine. It’s able to work in combination with a number of other gaming libraries in javascript. It allows using the WebGL capabilities for rendering 2D scenes and can independently determine whether WebGL support is available; if necessary, the library switches between rendering methods. I consider Pixi as a 2D analog of Three.js.

• GreenSock JS works with a set of small JavaScript files that make animations look great in all major browsers. It smoothly chains multiple animation properties and eliminates browser bugs. GSAP actions include creating animations on Canvas and animating any object in a scene. Also progressively revealing, morphing or moving any object along a path. In this website I have used it in combination with Pixi.js. This powerful library has a lot going for it.

• Three JS is about 3D graphics by render the output to a webpage in a regular old <canvas> element. Three.js does a lot of the repetitive bits for you: internally it’s generating WebGL code while exposing a simpler API. Three.js also has pre-built components and helper methods you can take advantage of to get started faster.

• Anime JS clocks 35K+ stars on GitHub. Working from a single powerful API, you can use it to animate HTML, CSS, JS, SVG and DOM attributes. There’s a lot you can do using the built-in callback and control functions. For instance, you can play, pause, control, reverse and trigger events in sync. To see what else is possible using this library, you can visit Codepen.



V. Hristova

Engineer Front-end developer