Svg.js, GSAP and anime.js

Svg.js 11,827 (github.com/svgdotjs/svg.js (https://github.com/svgdotjs/svg.js 11,827 ), npm 2,036 install @svgdotjs/svg.js; the old svg.js package stopped at 2.7.1 in 2018) wraps the SVG DOM in a chainable API with no dependencies. GSAP 88,281 (github.com/greensock/GSAP (https://github.com/greensock/GSAP 28,665 ), npm install gsap) is a timeline engine for attributes, CSS and objects; since Webflow 2,768 bought it, every plugin, MorphSVG and DrawSVG included, is free under GSAP's own no-charge license (not an open-source one). anime.js 224,114 (github.com/juliangarnier/anime (https://github.com/juliangarnier/anime 73,152 ), npm install animejs) is a lighter MIT animation library whose version 4 rewrite adds SVG helpers for line drawing, morphing and motion paths.

BookNest ratings drawn with Svg.js and grown by a staggered GSAP tweenHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.8/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script>
  const books = [['The Quiet Harbor', 4.6], ['Patterns of the Deep Web', 4.3],
    ['Salt and Saffron', 4.8], ['Small Steps to Big Summits', 4.1],
    ['The Clockmaker\'s Paradox', 4.5], ['Gardens in Glass', 4.4]];
  const colors = ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'];
  const draw = SVG().addTo('body').size(600, 150).font({ family: 'Georgia', size: 13 });
  const bars = books.map(([title, rating], i) => {
    draw.text(title).attr({ x: 190, y: i * 24 + 16, 'text-anchor': 'end' });
    draw.text(rating.toFixed(1)).attr({ x: 205 + (rating - 3) * 180, y: i * 24 + 16 });
    return draw.rect(0, 18).move(200, i * 24 + 2).radius(3).fill(colors[i])
      .data('width', (rating - 3) * 180);
  });
  const tl = gsap.to(bars.map(bar => bar.node), { duration: 1, ease: 'power2.out',
    stagger: 0.1, attr: { width: (i, node) => node.dataset.width } });
  tl.progress(1);                        // jump to the end frame for this capture
</script>

Browser output of 38

GSAP grows each bar from zero to its data-width, 0.1 s apart; progress(1) jumps to the last frame. The same tween in anime.js 4.5.0, checked on the same page:

The staggered tween in anime.jsJavaScript

import { animate, stagger } from
  'https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.esm.min.js';
animate('rect', { width: el => el.dataset.width, duration: 1000, delay: stagger(100),
  ease: 'outQuad' });

Current SVG libraries, September 2026
Library	Version (release)	License	Best for
Svg.js	3.2.8 (Aug 2026)	MIT	Building and editing SVG from code
GSAP	3.15.0 (Apr 2026)	Free, proprietary	Timelines, morphing, scroll effects
anime.js	4.5.0 (Jun 2026)	MIT	Light animation with SVG helpers

MENU