HTML JavaScript
Need help with walkway?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
ConnorAtherton

Description

An easy way to animate SVG elements.

4.4K Stars 244 Forks MIT License 64 Commits 2 Opened issues

Services available

Need anything else?

Walkway devDependency Status

I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo).

It supports

path
,
line
and
polyline
elements.

Download

yarn

yarn add walkway.js

npm

npm install walkway.js

CDN

https://cdn.jsdelivr.net/npm/walkway.js/src/walkway.min.js

How to use

Create a new

Walkway
instance with a supplied options object. When you want to start animating call
.draw
on the returned instance providing an optional callback that will be called when drawing is complete.
// Create a new instance
var svg = new Walkway(options);
// Draw when ready, providing an optional callback
svg.draw(callback);

// Options passed in as an object, see options below. var svg = new Walkway({ selector: '#test'});

// Overwriting defaults var svg = new Walkway({ selector: '#test', duration: '2000', // can pass in a function or a string like 'easeOutQuint' easing: function (t) { return t * t; } });

svg.draw();

// If you don't want to change the default options you can // also supply the constructor with a selector string. var svg = new Walkway('#test');

svg.draw(function() { console.log('Animation finished'); });

All animations will automatically complete when the window containing them loses focus, to another tab, for example. You can also choose to restart all animations in an event handler. To restart every animation when the window gains focus again, you can do:

document.addEventListener('visibilitychange', function() {
  if (!document.hidden) {
    svg.redraw();
  }
}, false);

Options

  • selector (mandatory) - The selector of the parent element (usually will be a specific svg element)
  • duration - Time the animation should run for, in ms. Default is 400.
  • easing - Name of the easing function used for drawing. Default is 'easeInOutCubic'. You can also supply your own function that will be passed the progress and should return a value in the range of [0, 1];

Easing

All credit for the built-in easing functions go to gre from this gist.

Gotchas

Sometimes when exporting from a program like Illustrator elements have no stroke style attached to them. This results in confusion when Walkway starts the animation and nothing shows up. Just be sure to add base styles that can be overwritten if required.

svg {
  path, line, polyline {
    stroke: #fff
    stroke-width: 2px
  }

path { fill: transparent } }

Demo

View the example link provided near the top of this README or see it in action on my website.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.