Advanced

SVG Utilities

Morph shapes, draw lines, and animate along motion paths with the built-in SVG utility functions.

Shape Morphing — morphTo()

Smoothly morph one SVG path into another:

import { animate, morphTo } from 'animejs';

animate('#shape-a', {
  d: morphTo('#shape-b'),
  duration: 1200,
  ease: 'inOutQuad',
  loop: true,
  direction: 'alternate',
});

Line Drawing — createDrawable()

Animate the drawing of SVG paths and strokes:

import { animate, createDrawable } from 'animejs';

animate(createDrawable('.my-path'), {
  draw: ['0 0', '0 1'], // from 0% to 100% drawn
  duration: 1500,
  ease: 'inOutCubic',
});

Motion Path — createMotionPath()

Animate an element along an SVG path:

import { animate, createMotionPath } from 'animejs';

animate('.car', {
  ...createMotionPath('.track'),
  duration: 3000,
  loop: true,
  ease: 'linear',
});

SVG Attributes

You can also animate any SVG attribute directly:

animate('circle', {
  cx: 200,
  cy: 150,
  r: [5, 30],
  fill: ['#ff4757', '#5352ed'],
  duration: 800,
});
← Scroll