Author: | jh3y |
---|---|
Views Total: | 294 views |
Official Page: | Go to website |
Last Update: | April 3, 2020 |
License: | MIT |
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); }