connoratherton / walkway

An easy way to animate SVG elements.

Walkway

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.

walkway's Issues

Animate text like you are writing with hand

What I would really like to achieve is to animate letters, like you are writing by hand.

I've converted text to outlines with AI, but I can only animate borders/lines of each letter, because, of course, path fill is transparent.

If I set fill to some color, naturaly, the effect is not the intended one, because the letters are already present, I am only animating the border lines.

Is it possible to animate letters to simulate the hand writing effect?

FYI, I am trying to animate this font: http://www.fontsquirrel.com/fonts/allura

Edit: I guess it is all down to the font itself and the generated code. If I set stroke width to 3 or 4 pixels, font width is ok, but it leaves parts of each letter blank.
If I set stroke width to something higher, around 10px, there are no blank parts, but the font gets very fat and look unnatural.

Scaling feature breaks existing animations

No errors coming through on console. But checked using latest walkway on my personal site and looking at both of your demos it is most certainly not working. Yours are just not coming out right and mine just does no animation at all at least any perceivable animation. btw you are getting 404 for typekit on your personal site.

Thank you for useful project. 👍

Show specific frame

Walkway looks like almost exactly what I need in leaving Vivus.

One thing I can't figure out so far is whether I have the ability to show a specific frame. What I want is to render the frames one at a time, so that I can screenshot them, rather than to have them animated in the browser.

Does Walkway support this kind of use?

Single path causing crash in FF 34.0.5

I was animating a group of SVGs with walkway when I noticed that one particular SVG was causing a complete crash in FireFox (34.0.5) - I mean the browser hangs and dies with a force quit required.

I have singled it out to the following path:

I replaced the path with another similar one and it worked fine but it just begged the question what is the issue with this one?

You can see the pen here: http://codepen.io/lewismcarey/pen/rayxbJ

paths don't always meet

Notice the 1px gap between the joins?

Incompatible with Sketch?

Does this work with other elements exported from Sketch? I see rect and other elements, but I'm unable to get any kind of animation on them. Also, does this work with any kind of text?

Here's a link to something I tried with a diamond exported from Sketch: https://gist.github.com/anonymous/38af460432c6835ca632

Add a trigger and delay options

Currently, all animations are scheduled to execute as soon as possible. It would be better to have more control over when an animation should start.

wrong signature for window.requestAnimationFrame shim

element is unused in window.requestAnimationFrame = function(callback, element) { and there is probably just the signature with callback in the official reference iplementation

Custom easing functions aren't used

The Readme says a custom easing function can be passed in the config object, but it doesn't seem to get used.

Checked the source and I don't see anything that could support a custom easing function.

Am I going mad?

Here is my example.

var svg = new Walkway({
    selector: '#my-svg',
    duration: 1000,
    easing: function(t) {
        console.log('never gets called');
        return t;
    }
});

fix https for the website

title says all :)

Illustrator SVG > Polyline > Wont animate

Hello, sorry for the disturbance, but despite a lot of attempts from me in both editing the html and the svg itself, I can't seem to make the animation to work. It just appears instantly.

Here is my code:

For SVG:

<svg version="1.1" id="logo" class="polyion" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;"
     xml:space="preserve">
     <style>
     #logo>polyline
     {
        fill:white;
        stroke:black;
     }
     </style>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="108.9,14.1 305.8,87.7 256.3,198.7 136.1,48.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="113.7,385.3 128.1,317.6 158.6,358.5 118.9,382.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="128.1,317.6 208,385.9 223.7,307.1 136.1,316.7 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="208,385.9 305.8,87.7 385.6,253 217.9,378.5 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="358.5,160.8 385.6,253 421.1,127.3 366.3,156.6 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="421.1,127.3 416,185.9 502.8,157.1 425.1,128.8 "/>
</svg>

For JS:

<script src="http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var svg = new Walkway({ 
      selector: '#logo',
      duration: '4000',
    });

    svg.draw();
});
</script>

Offset/animation doesn't seem to be calculated properly when using vector-effect on the line

When I leave my polyline with default width scaling the library works fine. However when I introduce vector-effect="non-scaling-stroke" to it (which keeps the line width consistent across all aspect ratios and SVG sizes), the library animates the line incorrectly.

Clearly the line length calculation (distance between points) doesn't work when the line is scaled?

Without vector effect (working):

With vector effect (not working):

SVG to reproduce

<svg class="line-chart" preserveAspectRatio="xMaxYMin meet" viewBox="0 0 500 200"><polyline fill="none" stroke="#ffdebc" stroke-width="2" points="0,31.151015419361215 20.833333333333332,95.79551150138761 41.666666666666664,93.57810025862017 62.5,101.39948216678847 83.33333333333333,116.36552130454557 104.16666666666667,107.56839313850095 125,123.65082075060661 145.83333333333334,126.8350258447492 166.66666666666666,125.56409462044603 187.5,151.8270861649812 208.33333333333334,75.90138801468669 229.16666666666666,81.88742105812197 250,70.50733121756468 270.8333333333333,121.80405066398154 291.6666666666667,199 312.5,149.0294677305178 333.3333333333333,113.05074179286761 354.1666666666667,115.25886072811352 375,112.20492249631282 395.8333333333333,74.85404003035873 416.6666666666667,115.35093319263832 437.5,96.52858939299156 458.3333333333333,90.46699799336331 479.1666666666667,0" vector-effect="non-scaling-stroke" style="stroke-dasharray: 889.288, 889.288; stroke-dashoffset: 0;"></polyline></svg>

Renders incomplete when page is loaded in background-tab

Hey Connor,
I'm playing around with walkway.js atm and there seems to be a problem when the page is loaded via a link in a new tab. (cmd+click link)

In Chrome/Safari, the SVG does not render at all, while in Firefox, the rendering seems to be incomplete in varying degrees.

Screenshots of the problem:

Steps to reproduce:

1. Open walkway.js demo page in a new tab and wait for it to load completely (e.g. by cmd-clicking a link to the page)
2. Switch over to the new tab - the SVG is not rendered and rendering does not invoke

Reproducable in:

• Safari Version 8.0 (10600.1.25)
• Chrome 38.0.2125.111
• Firefox 34.0

Not drawing out an SVG path

Walkway looks amazing, is it supposed to work on any SVG path or shape?

When I call draw on a path I exported from Illustrator, the SVG does not draw but just appears immediately. The callback to draw() is still successfully called however.

I added the below path to example/index.html. All other shapes do the "walkway" correctly, but this path just appears immediately.

<svg version="1.1" id="branch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="576px" height="720px" viewBox="0 0 576 720" enable-background="new 0 0 576 720" xml:space="preserve">
  <path d="M567.33,492.045c-2.484-0.357-4.945-0.857-7.383-1.479c0.416-13.219,0.684-26.436-0.096-39.646
    c-1.564-26.566-7.203-52.955-15.348-77.391c-4.152-12.455-8.938-24.637-14.783-35.927c-5.99-11.567-13.281-21.9-20.816-31.815
    c-2.572-3.383-5.176-6.728-7.777-10.077c-1.631-8.256-3.721-16.297-6.195-23.942c-0.896-2.773-4.449-1.558-3.539,1.258
    c1.648,5.098,3.127,10.384,4.416,15.795c-3.656-4.78-7.264-9.622-10.711-14.651c-0.83-1.213-1.654-2.448-2.479-3.694
    c-0.104-1.54-0.174-3.063-0.193-4.562c-0.031-2.643-2.793-2.994-3.502-1.051c-2.367-3.564-4.795-7.079-7.41-10.304
    c0.268-0.91,0.533-1.789,0.791-2.6c0.898-2.826-2.654-4.042-3.541-1.258c-0.051,0.162-0.104,0.339-0.154,0.504
    c-1.682-1.811-3.447-3.487-5.334-4.956c-3.07-2.392-5.957-5.134-8.768-8.013c0.062-0.289,0.139-0.571,0.197-0.862
    c0.521-2.556-2.057-3.832-3.15-2.222c-1.041-1.11-2.076-2.229-3.113-3.349c-0.084-1.36-1.115-2.543-2.139-2.303
    c-4.492-4.812-9.055-9.469-14.148-13.097c-1.004-0.715-2.02-1.393-3.041-2.055c1.422-2.334,2.773-4.733,4.035-7.198
    c1.309-2.555-1.871-4.922-3.168-2.388c-1.312,2.562-2.727,5.061-4.232,7.483c-3.973-2.395-8.018-4.591-11.984-7.028
    c-0.326-0.201-0.645-0.416-0.969-0.624c0.084-0.315,0.176-0.623,0.25-0.942c0.686-2.914-2.82-4.155-3.527-1.295
    c-3.766-2.721-7.389-5.723-11.234-8.294c-0.719-0.481-1.453-0.926-2.182-1.386c5.285-11.512,2.424-13.184,0.307-15.942
    c-0.555-0.721-1.549-0.955-2.225-0.37c-3.592,3.102-7.164,6.279-10.691,9.546c-14.188-6.382-29.432-9.521-44.391-10.5
    c-0.451-1.904-0.891-3.814-1.307-5.734c-0.633-2.935-4.176-1.687-3.539,1.259c0.309,1.429,0.646,2.844,0.977,4.265
    c-0.645-0.026-1.284-0.038-1.927-0.057c-0.664-0.713-1.684-0.893-2.397-0.065c-1.611-0.023-3.221-0.012-4.828,0.023
    c-0.652-1.15-1.83-0.859-2.539,0.095c-2.076,0.083-4.15,0.208-6.223,0.378c-0.236-1.827-0.531-3.592-0.918-5.264
    c-0.676-2.917-4.219-1.672-3.541,1.258c0.326,1.409,0.6,2.858,0.83,4.334c-2.385,0.249-4.768,0.551-7.145,0.895
    c-0.377-1.809-0.768-3.585-1.158-5.304c-0.66-2.925-4.201-1.68-3.539,1.258c0.336,1.489,0.682,3.035,1.02,4.606
    c-3.134,0.511-6.26,1.098-9.379,1.735c0.153-0.19,0.312-0.373,0.465-0.565c1.691-2.139-0.906-5.484-2.596-3.346
    c-1.078,1.364-2.19,2.673-3.315,3.962c-1.125-1.289-2.237-2.598-3.315-3.962c-1.689-2.138-4.287,1.207-2.596,3.346
    c0.153,0.193,0.312,0.376,0.466,0.566c-3.12-0.638-6.246-1.224-9.38-1.735c0.338-1.571,0.683-3.117,1.02-4.606
    c0.662-2.938-2.88-4.183-3.54-1.258c-0.39,1.719-0.78,3.496-1.157,5.304c-2.378-0.344-4.76-0.646-7.146-0.895
    c0.23-1.476,0.504-2.925,0.83-4.334c0.679-2.931-2.865-4.175-3.54-1.258c-0.387,1.672-0.682,3.438-0.918,5.264
    c-2.073-0.17-4.147-0.296-6.224-0.378c-0.708-0.955-1.887-1.245-2.538-0.095c-1.607-0.035-3.218-0.046-4.828-0.023
    c-0.714-0.83-1.734-0.649-2.399,0.065c-0.642,0.019-1.281,0.03-1.925,0.057c0.329-1.42,0.668-2.836,0.977-4.265
    c0.636-2.946-2.906-4.194-3.54-1.259c-0.415,1.92-0.855,3.831-1.307,5.734c-14.958,0.979-30.202,4.119-44.39,10.5
    c-3.527-3.267-7.1-6.444-10.691-9.546c-0.677-0.585-1.671-0.351-2.225,0.37c-2.117,2.758-4.979,4.43,0.307,15.942
    c-0.729,0.46-1.463,0.905-2.183,1.386c-3.846,2.571-7.468,5.574-11.234,8.294c-0.707-2.86-4.212-1.619-3.527,1.295
    c0.075,0.319,0.167,0.627,0.25,0.942c-0.323,0.208-0.642,0.423-0.969,0.624c-3.967,2.437-8.011,4.634-11.984,7.028
    c-1.505-2.423-2.919-4.921-4.231-7.483c-1.298-2.534-4.478-0.167-3.169,2.388c1.262,2.465,2.613,4.864,4.036,7.198
    c-1.021,0.663-2.038,1.34-3.041,2.055c-5.095,3.628-9.657,8.286-14.148,13.097c-1.023-0.24-2.056,0.943-2.14,2.303
    c-1.036,1.12-2.071,2.239-3.113,3.349c-1.094-1.61-3.672-0.333-3.15,2.222c0.06,0.291,0.136,0.573,0.198,0.862
    c-2.812,2.878-5.697,5.621-8.769,8.013c-1.887,1.469-3.651,3.145-5.333,4.956c-0.052-0.166-0.104-0.342-0.155-0.504
    c-0.886-2.784-4.438-1.567-3.54,1.258c0.258,0.812,0.523,1.69,0.791,2.6c-2.615,3.225-5.044,6.74-7.41,10.304
    c-0.71-1.943-3.471-1.591-3.503,1.051c-0.019,1.499-0.09,3.022-0.193,4.562c-0.823,1.246-1.647,2.48-2.479,3.694
    c-3.447,5.029-7.054,9.872-10.711,14.651c1.289-5.411,2.768-10.697,4.416-15.795c0.911-2.816-2.642-4.032-3.539-1.258
    c-2.474,7.645-4.563,15.687-6.194,23.942c-2.602,3.35-5.206,6.694-7.777,10.077c-7.536,9.915-14.826,20.248-20.816,31.815
    c-5.846,11.29-10.631,23.472-14.783,35.927c-8.145,24.436-13.783,50.824-15.348,77.391c-0.779,13.211-0.513,26.428-0.097,39.647
    c-2.437,0.621-4.898,1.12-7.383,1.478c-2.325,0.333-2.351,5.068,0,4.73c2.542-0.365,5.052-0.879,7.535-1.499
    c0.542,16.25,1.147,32.499,0.184,48.743c-0.93,1.239-1.841,2.511-2.731,3.817c-1.555,2.28,1.031,5.64,2.596,3.344
    c15.169-22.253,36.374-34.48,55.708-49.483c9.271-7.195,18.134-15.322,25.727-25.312c8.808-11.587,14.181-27.129,19.895-41.39
    c5.443-13.583,10.218-27.586,18.971-38.257c5.704-6.954,13.169-9.846,20.449-12.94c20.085-8.537,37.862-22.029,53.725-40.092
    c12.526-14.264,23.732-31.51,28.343-52.17c0.09,0.025,0.179,0.055,0.277,0.066c12.897,1.383,24.322-3.614,35.109-12.448
    c4.613-3.778,9.025-7.928,13.502-11.924c4.478,3.996,8.891,8.146,13.503,11.923c10.787,8.834,22.211,13.831,35.109,12.448
    c0.098-0.011,0.188-0.041,0.277-0.066c4.609,20.66,15.816,37.906,28.342,52.17c15.863,18.062,33.641,31.554,53.725,40.091
    c7.281,3.096,14.746,5.986,20.449,12.941c8.754,10.67,13.527,24.674,18.971,38.256c5.715,14.262,11.088,29.803,19.895,41.391
    c7.594,9.99,16.455,18.117,25.727,25.312c19.334,15.002,40.539,27.23,55.709,49.483c1.564,2.297,4.15-1.062,2.596-3.344
    c-0.891-1.307-1.803-2.578-2.732-3.816c-0.963-16.245-0.357-32.495,0.184-48.745c2.484,0.621,4.994,1.135,7.535,1.5
    C569.682,497.113,569.656,492.377,567.33,492.045z M445.832,266.411c2.188-7.871,5.209-15.224,7.398-23.054
    c1.791,1.742,3.627,3.4,5.535,4.899c0.715,0.562,1.418,1.137,2.107,1.726c-5.471,15.043-8.109,31.195-10.293,47.479
    C445.461,288.16,442.619,277.978,445.832,266.411z M394.887,181.449c0.99,1.249,0.047,4.732-2.016,9.27
    c-1.721-0.998-3.461-1.941-5.223-2.829C390.045,185.706,392.459,183.558,394.887,181.449z M393.982,196.927
    c4.73,3.217,9.273,6.791,14.109,9.951c-3.227,8.267-9.439,14.879-15.404,19.439c-2.86,2.188-5.97,4.249-9.212,5.824
    c-1.599-2.428-3.257-4.788-5.081-6.975c-0.582-0.697-1.175-1.382-1.773-2.059C382.641,214.475,389.699,204.846,393.982,196.927z
     M288.042,224.636c-3.438-1.997-6.802-4.408-9.637-7.492c-0.595-1.072-1.188-2.145-1.767-3.233
    c3.699-4.62,7.557-9.015,11.403-13.425c3.847,4.41,7.705,8.805,11.403,13.425c-0.578,1.087-1.171,2.16-1.766,3.231
    C294.845,220.227,291.48,222.639,288.042,224.636z M250.322,194.323c2.285,4.644,4.509,9.345,6.466,14.189
    c-0.839,6.987-2.502,13.338-6.058,18.077c-2.191,0.339-4.39,0.591-6.591,0.776c0.831-10.965,2.084-21.833,4.336-32.542
    C249.092,194.657,249.706,194.484,250.322,194.323z M216.422,210.904c1.397-1.509,2.843-2.925,4.387-4.13
    c2.769-2.162,5.758-3.858,8.812-5.306c-1.992,6.139-4.127,12.201-6.385,18.185C221.035,216.646,218.756,213.738,216.422,210.904z
     M277.543,187.989c0.312,0.397,0.632,0.784,0.947,1.178c-2.534,2.479-5.099,4.911-7.664,7.354c-0.038-2.45,0.113-4.935,0.386-7.412
    c2.022-0.51,4.044-1.025,6.068-1.528C277.352,187.721,277.439,187.856,277.543,187.989z M298.541,187.989
    c0.104-0.132,0.191-0.268,0.262-0.408c2.024,0.503,4.047,1.018,6.069,1.528c0.272,2.476,0.424,4.96,0.386,7.41
    c-2.564-2.442-5.129-4.875-7.663-7.353C297.909,188.772,298.229,188.387,298.541,187.989z M327.608,194.823
    c2.252,10.71,3.505,21.578,4.335,32.542c-2.201-0.185-4.399-0.437-6.59-0.776c-3.555-4.739-5.219-11.09-6.059-18.077
    c1.957-4.844,4.182-9.545,6.467-14.189C326.378,194.484,326.992,194.657,327.608,194.823z M346.463,201.468
    c3.055,1.447,6.044,3.144,8.812,5.306c1.543,1.205,2.989,2.621,4.387,4.129c-2.335,2.834-4.613,5.743-6.814,8.749
    C350.59,213.669,348.454,207.606,346.463,201.468z M358.514,182.954c7.191,1.553,14.367,3.562,21.332,6.407
    c-6.062,5.789-11.959,11.879-17.543,18.394c-5.23-5.622-11.309-9.374-17.701-12.175c-1.537-5.025-2.97-10.102-4.277-15.234
    C346.396,180.802,352.461,181.647,358.514,182.954z M323.779,180.036c0.627,2,1.204,4.008,1.744,6.021
    c-0.459,0.926-0.919,1.853-1.379,2.78c-1.984-0.541-3.979-1.043-5.973-1.552c-0.086-2.348-0.195-4.664-0.365-6.911
    C319.797,180.227,321.787,180.108,323.779,180.036z M303.795,181.974c0.118,0.636,0.23,1.275,0.34,1.917
    c-1.656-0.382-3.31-0.765-4.965-1.139C300.711,182.476,302.252,182.212,303.795,181.974z M272.29,181.974
    c1.542,0.239,3.082,0.502,4.622,0.777c-1.654,0.374-3.306,0.757-4.961,1.138C272.059,183.249,272.172,182.609,272.29,181.974z
     M252.305,180.037c1.991,0.072,3.981,0.19,5.972,0.338c-0.17,2.247-0.279,4.562-0.365,6.91c-1.993,0.509-3.988,1.011-5.972,1.552
    c-0.46-0.928-0.919-1.854-1.378-2.78C251.101,184.044,251.678,182.037,252.305,180.037z M217.571,182.954
    c6.052-1.306,12.117-2.151,18.188-2.609c-1.308,5.132-2.74,10.208-4.277,15.233c-6.393,2.801-12.472,6.554-17.701,12.176
    c-5.584-6.514-11.481-12.604-17.542-18.393C203.203,186.516,210.379,184.507,217.571,182.954z M181.198,181.45
    c2.428,2.108,4.841,4.257,7.238,6.441c-1.762,0.888-3.502,1.831-5.223,2.829C181.151,186.182,180.207,182.698,181.198,181.45z
     M182.102,196.928c4.283,7.918,11.341,17.547,17.361,26.18c-0.599,0.677-1.191,1.362-1.773,2.059
    c-1.824,2.187-3.482,4.547-5.082,6.976c-3.242-1.576-6.351-3.637-9.211-5.824c-5.965-4.56-12.179-11.172-15.405-19.439
    C172.828,203.718,177.372,200.145,182.102,196.928z M117.318,248.257c1.909-1.499,3.744-3.158,5.535-4.899
    c2.19,7.83,5.211,15.184,7.398,23.054c3.213,11.566,0.371,21.749-4.748,31.05c-2.184-16.284-4.822-32.436-10.292-47.479
    C115.901,249.394,116.603,248.819,117.318,248.257z M43.458,477.843c-7.45,5.122-15.346,9.108-23.552,11.663
    c-0.538-18.763-0.775-37.504,1.672-56.157c4.236-32.305,13.467-64.167,27.16-91.787c6.837-13.788,15.763-25.64,24.693-37.208
    c-4.423,28.55,2.944,71.484,0.809,72.748c-14.493,8.577-14.873,32.166-8.04,49.499c-19.253,3.539-21.181,28.866-23.152,49.549
    C42.976,476.903,43.15,477.467,43.458,477.843z M72.043,450.049c-4.428,5.826-9.223,11.238-14.318,16.124
    c-0.301-11.386,5.778-21.026,12.861-27.02c0.822-0.696,0.976-1.815,0.735-2.763c1.718,2.49,3.618,4.64,5.671,6.312
    c0.08,0.065,0.16,0.107,0.24,0.155C75.543,445.31,73.817,447.715,72.043,450.049z M93.351,413.854
    c-1.866,4.356-3.924,8.579-6.131,12.673c-7.41-7.164-11.348-24.24-5.25-33.882c0.108-0.172,0.189-0.35,0.256-0.531
    c2.928,6.438,6.474,12.508,10.712,18.08c0.514,0.677,1.117,0.82,1.656,0.633C94.19,411.844,93.779,412.856,93.351,413.854z
     M97.557,318.327c-6.505-13.421-1.936-30.772-0.574-46.101c1.898-2.72,3.794-5.445,5.685-8.191c1.068-1.551,2.164-3.03,3.29-4.447
    C111.078,279.519,115.417,312.376,97.557,318.327z M108.084,378.011c-0.728,1.23-1.408,2.499-2.064,3.787
    c-3.123-12.361-6.731-27.81,2.147-37.466c3.432-3.731,7.739-6.248,11.634-9.054c3.775-2.721,7.4-5.7,10.855-9.018
    c0.038,0.045,0.065,0.093,0.107,0.138c5.298,5.59,13.379,13.752,14.596,23.256C134.734,354.693,115.042,366.261,108.084,378.011z
     M153.322,294.802c-1.729,6.713-4.83,12.779-7.254,19.141c-0.891-0.872-1.782-1.741-2.613-2.72
    c-0.241-0.283-0.498-0.455-0.759-0.551c5.104-9.548,7.779-20.844,7.02-32.952C153.862,281.765,155.305,287.096,153.322,294.802z
     M147.662,259.661c-0.589-0.097-1.028,0.133-1.319,0.534c-3.18-9.992-8.198-19.139-13.668-27.19
    c4.992-5.379,10.044-10.484,15.819-14.401c0.279-0.19,0.563-0.369,0.845-0.554c6.275,9.396,13.829,17.48,22.192,23.502
    c-2.71,12.088-3.095,24.878-6.39,36.697C161.773,268.626,156.578,261.116,147.662,259.661z M167.897,335.905
    c-2.386,1.898-4.81,3.609-7.265,5.193c1.151-15.492,9.98-26.366,16.105-39.189c1.104-2.312,2.031-4.666,2.839-7.046
    c3.414,6.887,6.112,14.097,7.611,22.21c0.104,0.565,0.317,0.975,0.591,1.251C181.269,324.898,174.396,330.735,167.897,335.905z
     M202.666,300.57c-0.037-0.229-0.093-0.461-0.193-0.698c-3.595-8.539-6.689-18.282-4.303-27.56
    c2.546,7.058,7.341,11.937,14.143,10.605C209.744,289.214,206.442,295.089,202.666,300.57z M216.719,264.403
    c-4.347-1.17-6.577-4.881-6.655-10.657c-0.005-0.401-0.076-0.746-0.19-1.042c1.422-0.171,2.848-0.405,4.273-0.713
    c0.411-0.088,0.713-0.308,0.929-0.599C216.44,255.497,216.923,259.923,216.719,264.403z M241.773,269.421
    c0.395-6.069,0.7-12.131,0.993-18.178c1.943-1.056,3.799-2.151,5.574-3.315c6.85,0.571,13.609,1.869,19.973,4.991
    c0.661,0.324,1.312,0.67,1.959,1.023C261.575,261.971,251.717,268.074,241.773,269.421z M305.812,253.942
    c0.647-0.352,1.298-0.698,1.959-1.022c6.363-3.123,13.124-4.42,19.975-4.991c1.773,1.164,3.63,2.258,5.572,3.314
    c0.293,6.046,0.598,12.109,0.992,18.178C324.367,268.074,314.51,261.971,305.812,253.942z M359.365,264.403
    c-0.205-4.48,0.279-8.907,1.643-13.011c0.217,0.292,0.518,0.511,0.93,0.599c1.426,0.308,2.852,0.542,4.273,0.713
    c-0.115,0.296-0.186,0.642-0.191,1.042C365.941,259.521,363.711,263.232,359.365,264.403z M373.611,299.872
    c-0.1,0.237-0.156,0.469-0.193,0.698c-3.775-5.481-7.078-11.356-9.646-17.653c6.803,1.332,11.598-3.547,14.143-10.605
    C380.301,281.59,377.207,291.333,373.611,299.872z M408.188,335.905c-6.5-5.17-13.373-11.007-19.883-17.581
    c0.273-0.276,0.486-0.686,0.592-1.251c1.498-8.113,4.197-15.323,7.611-22.21c0.807,2.381,1.734,4.735,2.838,7.046
    c6.125,12.823,14.955,23.697,16.105,39.189C412.996,339.514,410.572,337.803,408.188,335.905z M410.943,278.249
    c-3.295-11.819-3.68-24.609-6.391-36.697c8.363-6.021,15.918-14.105,22.193-23.502c0.281,0.185,0.564,0.363,0.844,0.554
    c5.775,3.917,10.828,9.022,15.82,14.401c-5.471,8.051-10.488,17.198-13.668,27.19c-0.291-0.401-0.73-0.631-1.32-0.534
    C419.506,261.115,414.311,268.625,410.943,278.249z M422.762,294.802c-1.982-7.706-0.539-13.037,3.607-17.083
    c-0.76,12.108,1.914,23.404,7.02,32.952c-0.262,0.096-0.518,0.268-0.76,0.551c-0.83,0.979-1.723,1.849-2.613,2.72
    C427.592,307.581,424.49,301.515,422.762,294.802z M470.064,381.797c-0.656-1.287-1.338-2.557-2.064-3.787
    c-6.957-11.75-26.65-23.317-37.275-28.355c1.217-9.504,9.297-17.666,14.596-23.256c0.041-0.045,0.068-0.093,0.107-0.138
    c3.455,3.317,7.08,6.297,10.855,9.018c3.895,2.806,8.201,5.322,11.633,9.054C476.795,353.988,473.188,369.436,470.064,381.797z
     M470.127,259.588c1.125,1.417,2.221,2.896,3.289,4.447c1.891,2.746,3.787,5.471,5.686,8.191c1.361,15.329,5.93,32.68-0.574,46.101
    C460.666,312.376,465.006,279.519,470.127,259.588z M488.863,426.527c-2.207-4.094-4.264-8.316-6.131-12.674
    c-0.428-0.998-0.838-2.01-1.242-3.027c0.539,0.188,1.143,0.045,1.656-0.633c4.238-5.572,7.783-11.643,10.711-18.08
    c0.066,0.182,0.148,0.359,0.256,0.531C500.211,402.287,496.273,419.363,488.863,426.527z M504.041,450.049
    c-1.773-2.334-3.5-4.74-5.189-7.191c0.08-0.049,0.16-0.09,0.24-0.156c2.053-1.672,3.953-3.82,5.67-6.311
    c-0.24,0.947-0.086,2.066,0.736,2.762c7.082,5.994,13.162,15.635,12.861,27.02C513.264,461.287,508.469,455.875,504.041,450.049z
     M556.178,489.506c-8.205-2.555-16.102-6.541-23.551-11.664c0.307-0.375,0.48-0.939,0.41-1.693
    c-1.973-20.684-3.9-46.01-23.152-49.549c6.832-17.334,6.453-40.922-8.041-49.5c-2.135-1.264,5.232-44.197,0.809-72.747
    c8.932,11.568,17.857,23.421,24.693,37.208c13.693,27.621,22.924,59.482,27.16,91.787
    C556.953,452.002,556.717,470.742,556.178,489.506z"/>
  </svg>

and the code I added to the JS:

var svg4 = new Walkway({
          selector: '#branch',
          duration: 500,
          easing: 'linear'
        });

        svg4.draw(function(){
          console.log('finished branch!');
        });

How can I restart the animation ?

Is there any way to reinitialise the animation on click a button?

New release needed

v0.0.7...master

Create git tag for versions

Some package management systems that take advantage of Bower (such as rails-assets) need versions to be tagged in the repository. Could you tag the existing version as v0.0.1 or something similar?

SORRY INCORRECT REPO: Pingdom widget 403 Forbidden Error

Seeing the following issue on a Pingdom API call:

================================================================================
scheduler caught exception:
403 Forbidden
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/abstract_response.rb:48:in `return!'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:230:in `process_result'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:178:in `block in transmit'
/home/vagrant/.rvm/rubies/ruby-2.1.4/lib/ruby/2.1.0/net/http.rb:853:in `start'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:172:in `transmit'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:64:in `execute'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient/request.rb:33:in `execute'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rest-client-1.6.7/lib/restclient.rb:68:in `get'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/uptime.rb:24:in `make_request'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/uptime.rb:11:in `calc'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/bottles/pingdom/client.rb:19:in `uptime'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/jobs/pingdom_uptime.rb:18:in `metrics'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/dashing-contrib-0.1.6/lib/dashing-contrib/runnable_job.rb:24:in `block in schedule!'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:230:in `call'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:230:in `trigger_block'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/jobs.rb:204:in `block in trigger'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/scheduler.rb:430:in `call'
/home/vagrant/.rvm/gems/ruby-2.1.4/gems/rufus-scheduler-2.0.24/lib/rufus/sc/scheduler.rb:430:in `block in trigger_job' 

Verified that my information was correct, and have looked into the plugin to no avail. Any ideas?

feature suggestion: filter elements (draw / redraw)

Currently querySelectorAll is used for the selector so we can already draw a set of elements at the same time.

But in some cases it might be helpful to instanciate Walkway on a set of elements and draw just single elements using a filter / id selector). This could be done with an optional parameter (selector to filter the current elements of the instance) for draw and redraw.

Like creating a Walkway instance for all elements with a class animated and then animate a single one using an id selector.

I've done a similar approach using an associative array / object with multiple Walkway instaces and calling draw of the instance when the animated element enters the viewport.

https://sicherheit.daniel-ruf.de

Add Walkway to jsDelivr

jsdelivr/jsdelivr#2230

In the selector option, do i have to provide the entire svg element, or can i access only one path element inside the svg

In the selector option, do I have to provide the entire svg element, or can i target only one path element inside the svg?
Thanks

Use the page visibility api to complete paths when a user navigates away

https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

http://codepen.io/connoratherton/pen/ByBJxL

publish the latest version on bower

current version is 0.0.4 on bower.

Can you make clear the license?

Hi,

I know that the license of this repository is MIT, because appears inside pacakge.json, nonetheless it would be good if you can a LICENSE file and/or a note in the README, because it would be clearer.

Thanks.

Custom easing functions aren't used

The Readme says a custom easing function can be passed in the config object, but it doesn't seem to get used.

Checked the source and I don't see anything that could support a custom easing function.

Am I going mad?

Here is my example.

var svg = new Walkway({
    selector: '#my-svg',
    duration: duration,
    easing: function(t) {
        console.log('never gets called');
        return t;
    }
});

Redirect original URL?

I notice you have this page:

http://connor-personal.herokuapp.com/walkway

And this one:

https://connoratherton.com/walkway

Looks like the second one is the official page now. Would probably make sense to redirect the old one.

Website looks empty in Firefox 44.0.2

The website looks as if there was nothing but the name (only thing that is not in white). After either setting body height or removing floats you can see the background color. Chrome works version works fine. Problem occurs in Firefox 44.0.2.

destroy / cleanup method

In SPAs (single page applications) and in other cases it probably makes sense to clear the current elements and remove the event listener.

At least it also makes sense to remove the event listener when not needed anymore (for example when the visibility was changed and all elements were drawn or in a destroy/cleanup method).

Also in my opinion it makes sense to add an option to disable the visibilitychange eventlistener or not add it and provide also an optional pause / pauseOnVisibilityHidden or similar method.

Your opinions on this?

Push v0.0.4 to NPM

Hi,

Thanks very much for merging the fix to package.json, and tagging the new release. Are you able to push v0.0.4 up to NPM so that it can be installed without the Git URL?

Thanks!

Release?

Thanks for your awesome library!

I'm wondering whether there's a release planned in the near future. I'd happy to see new features published to NPM, especially #35, which fixes annoying npm warnings during installation.

add option for complete on visibilitychange

The next tagged release would break many existing projects as the animations would not keep running but immediately complete on visibilitychange.

This should not be the case by default and just be enabled with another parameter when creating a Walkway instance.

It could also make sense to provide an argument (function) to override the behavior when the visibility of the tab changes. Should the animation reset or complete? Or should the visibilitychange in the current master be removed and developers have to add the desired behavior to their own code?

Because like you said in another issue, Walkway should not depend on any viewport things and just be used for the actual animation.