Animate Any Element Along An SVG Path – Meanderer.js

Preview:

Description:

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
$ npm install meanderer --save

2. Import the Meanderer.js library.

<script src="https://cdn.jsdelivr.net/npm/meanderer@latest/dist/meanderer.min.js"></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="http://www.w3.org/2000/svg">
    <path></path>
  </svg>
  <div class='motion-element'>
  </div>
</div>

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(
    CONTAINER.offsetWidth,
    CONTAINER.offsetHeight
  )
  CONTAINER.style.setProperty('--path', `"${scaledPath}"`)
  PATH_EL.setAttribute('d', scaledPath)
}
const SizeObserver = new ResizeObserver(setPath)
SizeObserver.observe(CONTAINER)

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);
}