The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×


    An easy way to animate SVG elements.
    Filed under 

    • 🔾55%Overall
    • 4,370
    • 55.7 days
    • 🕩229
    • 👥14

    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.



    yarn add walkway.js


    npm install walkway.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
    // 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;
    // 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) {
    }, false);


    • 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];


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


    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


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

    Show All