An easy way to animate SVG elements.

Last update: Jan 2, 2023

Related tags

Overview

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.

Comments

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?

opened by DanielRuf 8

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

opened by donpinkus 7

feat(path): add viewbox scaling

hi! 👋 love the lib @ConnorAtherton - makes for some really cool animations of existing svg's with minimal effort.

one issue that I came across was that when using a svg with a predefined viewbox & resizing larger than that viewbox, the path length remained at the viewbox scale leading to incomplete drawings. to remedy this, I added a check for a viewbox definition in the the Path constructor, which then can get this scale & use it to calculate length.

let me know if this looks ok! I didn't test any line/polylines so only added it to path for now. also bumped the version & rebuilt (still on 0.0.6 on npm, would be great if you could bump it afterward 🙂).

opened by brycedorn 6
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

opened by DanielRuf 5
improve JavaScript
Improve JavaScript coding style and performance

Expected '{' and instead saw 'return'.

Hoist variable inside of forloop to top of function

cache polyline.points.numberOfItems outside of loop to improve performance
opened by marcobiedermann 5

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>

opened by dennisjerdz 5

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

opened by lewismcarey 5
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.

opened by akhramov 3
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.

opened by szynszyliszys 3
Added support for the polyline svg element

Hey,

I added some methods for supporting the polyline SVG element, which I noticed is the default export option for Illustrator if a path doesn't have any curves. This is my first Github pull request, so please let me know if I missed any important parts or anything.

opened by carnye 3
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

opened by joshuamauldin 3
Animate SVG based on scroll position
New option scrollPosition which allows developers to choose a scroll threshold for the animation to be completed. This option overrides the duration option when active.
opened by tsamantanis 0

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): screen

With vector effect (not working): screen2

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>

opened by alexgurr 1

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?

opened by StoneCypher 15

Owner

Connor Atherton

GitHub http://connoratherton.com/walkway

Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

21.2k Jan 4, 2023

A javascript library to animate elements on scroll page events

ScrollJS by Sam Sirianni ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS webs

1 Mar 21, 2021

An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.

svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).

8 Jul 27, 2022

The easiest way to animate your Next.js project. Scrollreveal.js helper package.

next-reveal The easiest way to animate your Next.js app Demo Introduction next-reveal makes it easy to add awesome scroll animations to your Next.js p

8 Nov 25, 2022

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

34 Dec 14, 2022

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

6.8k Jan 5, 2023

A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

23 Oct 5, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist ?? ?? ?? ?? ?? The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

11 Dec 13, 2022

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

31 Dec 10, 2022

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explo

9.9k Jan 2, 2023

Animate on scroll library

❗ ❗ ❗ This is README for aos@next ❗ ❗ ❗ For last stable release (v2) go here ?? Demo ?? Codepen Examples Different built-in animations With anchor set

22.3k Jan 2, 2023

animate.css as a Tailwind plugin

tailwind-animatecss Use animate.css as a Tailwind 3 plugin. Demo – https://dumptyd.github.io/tailwind-animatecss Table of contents Installation Usage

42 Dec 19, 2022

Animate your Alpine components.

Animate your Alpine components ?? This package provides you with a simple helper to animate your ALpine.js components. Installation The recommended wa

18 Nov 16, 2022

A lightweight script to animate scrolling to anchor links.

DEPRECATION NOTICE: Smooth Scroll is, without a doubt, my most popular and widely used plugin. But in the time since I created it, a CSS-only method f

5.4k Dec 26, 2022

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

216 Sep 10, 2022

A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman".

birdman.js A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman". See it in action at chrisma.github.io/birdman.js I'm aware t

33 Dec 30, 2021

Javascript library to animate images on hover.

Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo

13 Nov 21, 2022

Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.

Write and Delete Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more

2 Nov 15, 2022

Alpine.js wrapper for @formkit/auto-animate.

?? Alpine AutoAnimate ?? An Alpine.js wrapper for @formkit/auto-animate. ?? Installation CDN Include the following <script> tag in the <head> of your

16 Dec 28, 2022