Animate Any Element Along An SVG Path – Meanderer.js

Category: Animation , Javascript | April 3, 2020
Views Total:321 views
Official Page:Go to website
Last Update:April 3, 2020


Animate Any Element Along An SVG Path – Meanderer.js


Meanderer.js is a vanilla JavaScript library to animate any object along an SVG path you define.

Works with modern browsers that support CSS Motion Path property.

How to use it:

1. Install & download the package.

$ npm install meanderer --save

2. Import the Meanderer.js library.

<script src=""></script>

3. Insert an empty SVG element together with a motion element into your page.

<div id="container" class="container">
  <svg id="path-rep" xmlns="">
  <div class='motion-element'>

4. Create a responsive SVG path as follows:

const CONTAINER = document.querySelector('#container');
const PATH_EL = document.querySelector('#path-rep path');
const PATH = 'M3 42C3 0 19 3 19 3l4 39S22 3 35 3s9 39 9 39'
const WIDTH = 47
const HEIGHT = 45
let responsivePath = new Meanderer({
    path: PATH,
    width: WIDTH,
    height: HEIGHT,

5. Set up responsive path handling.

const setPath = () => {
  const scaledPath = responsivePath.generatePath(
  )'--path', `"${scaledPath}"`)
  PATH_EL.setAttribute('d', scaledPath)
const SizeObserver = new ResizeObserver(setPath)

6. Animate the motion element along the SVG path using the CSS Motion Path property.

.motion-element {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0%;
  left: 0%;
  offset-path: path(var(--path));
  animation: travel 2s infinite var(--animation-direction, normal) linear;
  transform-style: var(--transform-style, 'none');
  transform: translate3d(0, 0, 20px);

You Might Be Interested In:

Leave a Reply