Why Anime.js, the 68K‑Star Front‑End Animation Powerhouse, Is a Must‑Try

Anime.js is a lightweight, high‑performance JavaScript animation library that has recently received a major update (v4), now boasting over 68 000 GitHub stars. The new release adds a modular ES‑module API, tree‑shaking support, higher frame‑rate performance (60 fps on many DOM elements), an improved timeline controller, and new features such as CSS variables, SVG path animation, scroll‑linked animation and additive animation.

Anime.js Overview

Anime.js provides animation capabilities for CSS properties, SVG attributes, DOM elements and JavaScript objects, covering simple transitions to complex interactive effects. It is widely used in the front‑end community for creating sophisticated animations.

Key Highlights of the New Version

Modular API : each feature is exported as an ES module, enabling effective tree shaking and keeping the bundle size small.

High performance : the engine is optimized to maintain smooth 60fps even when animating large numbers of DOM elements.

Timeline control : the timeline feature has been refined, allowing developers to manage animation pacing more precisely.

New features : support for CSS variables, SVG path animation, scroll‑linked animation, and additive animation.

Using Anime.js in Vue

The library now offers better compatibility with Vue, so it can be used directly without the Vue‑Anime plugin.

Installation

npm install animejs

Import in a Vue project

// @ts-ignore
import anime from 'animejs';

Apply in a Vue component

<template>
  <div ref="ball" class="ball"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// @ts-ignore
import anime from 'animejs';

const ball = ref(null);

onMounted(() => {
  anime({
    targets: ball.value,
    translateX: 250,
    rotate: '1turn',
    backgroundColor: '#F00',
    duration: 800,
  });
});
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  background: blue;
}
</style>

Anime.js Effect Showcase

Scroll‑linked animation

Developers can bind animations to scroll events, triggering movement, scaling or color changes as the page scrolls.

SVG path animation

SVG path animation lets developers draw paths, morph shapes, or move objects along a path—useful for data visualisation and graphic design.

Mouse‑drag follow animation

By combining with mouse events, Anime.js can create real‑time drag‑follow effects for interactive interfaces.

Duration‑growth animation

Using the duration property and easing functions, developers can animate a gradual increase in duration, suitable for visualising data changes.

Overall, Anime.js V4’s modular API, performance improvements and deep Vue integration make it a versatile choice for both simple element animations and complex SVG effects.

Resources

Official site: https://animejs.com/ GitHub repository:

https://github.com/juliangarnier/anime