8 ms·

Walkway.js

351 points by connoratherton 12y ago

chadillac 12y ago
Nice work, looks great.
- bengali3 12y ago
  agreed!
Mithaldu 12y ago
On my machine the animation never plays in Opera 12, and in Chrome and Firefox the black color is never applied.
- connoratherton 12y ago
  Thanks, I'll look into it now.
- na85 12y ago
  In Chrome on my machine, the black colour is not applied also. Furthermore if I middleclick to open a new tab, the animation does not play.
S4M 12y ago
"server not found". I don't know if HN crashed the server or if there is some irony involved.
rmtutty 12y ago
Site's not available?
jerrysievert 12y ago
not working in Safari with Yosemite.
- catkin 12y ago
  Works fine for me with the same setup (Safari 8 on Yosemite).
sergiosgc 12y ago
The current link does not work for me (Firefox 36.0a1 on Debian). The correct content seems to be here: http://connor-personal.herokuapp.com/walkway http://connor-personal.herokuapp.com/walkway Why doesn't it work? I imagine it's this funky DNS config: sergio@sergio-laptop:~ > dig www.connoratherton.com ;; QUESTION SECTION: ;www.connoratherton.com. IN A ;; ANSWER SECTION: www.connoratherton.com. 3529 IN CNAME http://connor-personal.herokuapp.com. http://connor-personal.herokuapp.com. 229 IN CNAME us-east-1-a.route.herokuapp.com. us-east-1-a.route.herokuapp.com. 55 IN A 50.19.235.218 This is not valid CNAME content. Does this work on some browsers???
- connoratherton 12y ago
  Switched to Google domains a few days ago, still configuring it properly. Thanks for letting me know about the link, looking into it.
  - zyxley 12y ago
    Trying to configure DNS settings for herokuapp.com isn't going to work, given that it isn't, you know, actually your domain to configure. What you should have is something like connoratherton.com A 54.221.226.116 www.connoratherton.com CNAME connor-personal.herokuapp.com Alternately, if your domain registrar supports ANAME or ALIAS, you should have, respectively, connoratherton.com ANAME connor-personal.herokuapp.com www.connoratherton.com CNAME connor-personal.herokuapp.com or connoratherton.com ALIAS connor-personal.herokuapp.com www.connoratherton.com CNAME connor-personal.herokuapp.com
  - Sir_Cmpwn 12y ago
    I bet you could do this pretty effectively with GitHub pages instead of a full blown Heroku app.
  - Zaheer 12y ago
    Do you happen to have any extra invites for Google domains?
    - 12y ago
erex78 12y ago
How would somebody do this w/ D3? Are there any similar bl.ocks that anybody knows about?
- bengali3 12y ago
  From d3js.org site I do get to this [1] (click the page number to to animate lines) not sure about the easing functionality however. [1] http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-...
- RBerenguel 12y ago
  Since you can write more or less, arbitrary "tween" functions in D3 (I learnt more than I wanted to about these when I wrote the dynamic "semaphore pie" we used here [1] ) it's relatively viable to do it for paths created from within D3. For paths already present and wanting to be selected... I guess it would work pretty much the same, since d3 selectors are more or less good to go with embedded SVGs, IIRC. It's actually a very nice trick (and I love moving things around in graphs), and I'm intrigued by how I'd do it with D3. If I have any free time this weekend I'll look into it ;) [1] VanillaSEO: http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58899defb9e http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58... Ninja edit (or almost): Here's the relevant part of d3 docs about tweens: https://github.com/mbostock/d3/wiki/Transitions https://github.com/mbostock/d3/wiki/Transitions
- mbostock 12y ago
  You can transition the stroke-dasharray property and use element.getTotalLength to determine the total length of the path. Here’s a bl.ock: http://bl.ocks.org/mbostock/5649592 http://bl.ocks.org/mbostock/5649592 And here’s an older graphic that demonstrates the technique in use: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html http://www.nytimes.com/interactive/2013/02/20/movies/among-t... We also used this technique to render the progress map in The Russia Left Behind: http://www.nytimes.com/newsgraphics/2013/10/13/russia/ http://www.nytimes.com/newsgraphics/2013/10/13/russia/
connoratherton 12y ago
Sorry guys, I really didn't expect this much traffic. I still have to do some compatibility testing, I'm aiming to do it this weekend.
- JohnHaugeland 12y ago
  Works well on Windows Phone 8.1. I'm telling you because I'm pretty sure I'm the only Windows Phone user worldwide.
  - Gmo 12y ago
    No you're not :)
TheAceOfHearts 12y ago
If I open this in a tab and wait a while to go there, it never plays the animation. https://www.dropbox.com/s/z57g1fmmn10qmej/Screenshot%202014-10-31%2010.14.42.png?dl=0 https://www.dropbox.com/s/z57g1fmmn10qmej/Screenshot%202014-...
coob 12y ago
Cool! We've been using a similar technique in our in-app sales page, also inspired by the Verge articles. I'll upload a video when I get a chance.
jh47 12y ago
Works great for me on Safari 8 (Yosemite)!
jakelear 12y ago
Hey Connor, awesome work. You would have saved us a lot of work had you created this a year ago ;)
liminal 12y ago
This seems like an awful lot of code for animating the path's strokeDashArray and strokeDashOffset attributes. Especially if you're already using another library with built in transitions, such as D3 or even jQuery.
deleted 12y ago
[deleted]
- mintone 12y ago
  --"I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them."
ChrisArchitect 12y ago
was gonna ask if inspired by Verge/Polygon console reviews from awhile back... nice.
drunken_thor 12y ago
it seems that it doesnt run if I open this in a new tab and stay on the current page but if I reload the page it works (all done with chrome) Seems like a page focus event gone wrong
lnanek2 12y ago
make sure to leave and come back/hit refresh etc to try to get the animation to fire. looks cool, although there was nothing on the screen the first time i went to the tab on Chrome/MacOSX
cdnsteve 12y ago
Should be called Hawt.JS
scott_karana 12y ago
Firefox 33.0.2 on OSX 10.9 here. It renders well if the tab is in focus (fantastic work!) but there's a bug: if I open it in a tab in the background, and visit it later (after the animation would have completed?) I see only a nearly-blank page. Confused me for a bit, as I open mass-tabs here on HN...
- andrewrice 12y ago
  Same here (Chrome 38 on Win 8.1)
- popey456963 12y ago
  I get the same problem, tried on both Chrome and Internet Explorer (Windows 7).
- cturhan 12y ago
  I guess OP doesn't use requestAnimationFrame, otherwise, it would wait for the tab being focused. Edit: Checked the code. He uses requestAnimationFrame.
  - pgsuckz 12y ago
    You meant the opposite though, right?
- experimental- 12y ago
  In Linux, I get a varying, incomplete image with Firefox (33) and nothing with Chrome (38).
- andrethegiant 12y ago
  The Page Visibility API would help fix this. https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API https://developer.mozilla.org/en-US/docs/Web/Guide/User_expe...
- maemre 12y ago
  I got the same problem with Safari 8 on OS X 10.10
thedz 12y ago
Hey! Guy who did the Polygon PS4 and Xbox review SVG animations here. This is really great stuff; has a super friendly API to boot. FWIW, we also released a generalized library for some of the things we were doing WRT frame-based and duration-based animation: https://github.com/voxmedia/metronome https://github.com/voxmedia/metronome (Reason being that for some animations, we wanted it to finish in a precise amount of time, but for others, maintaining frame rate was paramount, even if total elapsed time was longer)
deleted 12y ago
[deleted]
thrush 12y ago
Really silly request, but could someone provide an implementation where I can just drop in an svg and it would have this effect? Please, and thank you.
- boomskats 12y ago
  Have a look at lazy line painter http://lazylinepainter.info/ http://lazylinepainter.info/
  - thrush 12y ago
    Gotcha. The next step is making an animatable SVG. I'm trying to follow https://inkscape.org/doc/tracing/tutorial-tracing.html https://inkscape.org/doc/tracing/tutorial-tracing.html
olso4052 12y ago
Very nice. It's funny, I keep clicking on these 'new JS library' links thinking, oh geez, not another one... but then I leave thinking, wow, that is very impressive and super useful.
sighlent 12y ago
I made this http://grayarea.org/theater/ http://grayarea.org/theater/ after being inspired by the Polygon animations. I'm using Two.js https://github.com/jonobr1/two.js https://github.com/jonobr1/two.js to do the SVG interpreting and processing.
yblu 12y ago
This article by Jake Archibald does a good job of explaining the underlying mechanism used by libraries such as walkway.js: http://jakearchibald.com/2013/animated-line-drawing-svg/ http://jakearchibald.com/2013/animated-line-drawing-svg/.
anubhabb 12y ago
Link broken?
idid 12y ago
A bit of trouble on OS X Yosemite, running Chrome. if i open it an new tab, nothing happens. cmd + r and it works.

Walkway.js

351 points by connoratherton 12y ago

chadillac 12y ago

Nice work, looks great.

bengali3 12y ago
agreed!

Mithaldu 12y ago

On my machine the animation never plays in Opera 12, and in Chrome and Firefox the black color is never applied.

connoratherton 12y ago
Thanks, I'll look into it now.
na85 12y ago
In Chrome on my machine, the black colour is not applied also. Furthermore if I middleclick to open a new tab, the animation does not play.

S4M 12y ago

"server not found". I don't know if HN crashed the server or if there is some irony involved.

rmtutty 12y ago

Site's not available?

jerrysievert 12y ago

not working in Safari with Yosemite.

catkin 12y ago
Works fine for me with the same setup (Safari 8 on Yosemite).

sergiosgc 12y ago

The current link does not work for me (Firefox 36.0a1 on Debian). The correct content seems to be here: http://connor-personal.herokuapp.com/walkway http://connor-personal.herokuapp.com/walkway Why doesn't it work? I imagine it's this funky DNS config: sergio@sergio-laptop:~ > dig www.connoratherton.com ;; QUESTION SECTION: ;www.connoratherton.com. IN A ;; ANSWER SECTION: www.connoratherton.com. 3529 IN CNAME http://connor-personal.herokuapp.com. http://connor-personal.herokuapp.com. 229 IN CNAME us-east-1-a.route.herokuapp.com. us-east-1-a.route.herokuapp.com. 55 IN A 50.19.235.218 This is not valid CNAME content. Does this work on some browsers???

connoratherton 12y ago
Switched to Google domains a few days ago, still configuring it properly. Thanks for letting me know about the link, looking into it.
- zyxley 12y ago
  Trying to configure DNS settings for herokuapp.com isn't going to work, given that it isn't, you know, actually your domain to configure. What you should have is something like connoratherton.com A 54.221.226.116 www.connoratherton.com CNAME connor-personal.herokuapp.com Alternately, if your domain registrar supports ANAME or ALIAS, you should have, respectively, connoratherton.com ANAME connor-personal.herokuapp.com www.connoratherton.com CNAME connor-personal.herokuapp.com or connoratherton.com ALIAS connor-personal.herokuapp.com www.connoratherton.com CNAME connor-personal.herokuapp.com
- Sir_Cmpwn 12y ago
  I bet you could do this pretty effectively with GitHub pages instead of a full blown Heroku app.
- Zaheer 12y ago
  Do you happen to have any extra invites for Google domains?
  - 12y ago

erex78 12y ago

How would somebody do this w/ D3? Are there any similar bl.ocks that anybody knows about?

bengali3 12y ago
From d3js.org site I do get to this [1] (click the page number to to animate lines) not sure about the easing functionality however. [1] http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-...
RBerenguel 12y ago
Since you can write more or less, arbitrary "tween" functions in D3 (I learnt more than I wanted to about these when I wrote the dynamic "semaphore pie" we used here [1] ) it's relatively viable to do it for paths created from within D3. For paths already present and wanting to be selected... I guess it would work pretty much the same, since d3 selectors are more or less good to go with embedded SVGs, IIRC. It's actually a very nice trick (and I love moving things around in graphs), and I'm intrigued by how I'd do it with D3. If I have any free time this weekend I'll look into it ;) [1] VanillaSEO: http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58899defb9e http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58... Ninja edit (or almost): Here's the relevant part of d3 docs about tweens: https://github.com/mbostock/d3/wiki/Transitions https://github.com/mbostock/d3/wiki/Transitions
mbostock 12y ago
You can transition the stroke-dasharray property and use element.getTotalLength to determine the total length of the path. Here’s a bl.ock: http://bl.ocks.org/mbostock/5649592 http://bl.ocks.org/mbostock/5649592 And here’s an older graphic that demonstrates the technique in use: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html http://www.nytimes.com/interactive/2013/02/20/movies/among-t... We also used this technique to render the progress map in The Russia Left Behind: http://www.nytimes.com/newsgraphics/2013/10/13/russia/ http://www.nytimes.com/newsgraphics/2013/10/13/russia/

connoratherton 12y ago

Sorry guys, I really didn't expect this much traffic. I still have to do some compatibility testing, I'm aiming to do it this weekend.

JohnHaugeland 12y ago
Works well on Windows Phone 8.1. I'm telling you because I'm pretty sure I'm the only Windows Phone user worldwide.
- Gmo 12y ago
  No you're not :)

TheAceOfHearts 12y ago

If I open this in a tab and wait a while to go there, it never plays the animation. https://www.dropbox.com/s/z57g1fmmn10qmej/Screenshot%202014-10-31%2010.14.42.png?dl=0 https://www.dropbox.com/s/z57g1fmmn10qmej/Screenshot%202014-...

coob 12y ago

Cool! We've been using a similar technique in our in-app sales page, also inspired by the Verge articles. I'll upload a video when I get a chance.

jh47 12y ago

Works great for me on Safari 8 (Yosemite)!

jakelear 12y ago

Hey Connor, awesome work. You would have saved us a lot of work had you created this a year ago ;)

liminal 12y ago

This seems like an awful lot of code for animating the path's strokeDashArray and strokeDashOffset attributes. Especially if you're already using another library with built in transitions, such as D3 or even jQuery.

deleted 12y ago

[deleted]

mintone 12y ago
--"I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them."

ChrisArchitect 12y ago

was gonna ask if inspired by Verge/Polygon console reviews from awhile back... nice.

drunken_thor 12y ago

it seems that it doesnt run if I open this in a new tab and stay on the current page but if I reload the page it works (all done with chrome) Seems like a page focus event gone wrong

lnanek2 12y ago

make sure to leave and come back/hit refresh etc to try to get the animation to fire. looks cool, although there was nothing on the screen the first time i went to the tab on Chrome/MacOSX

cdnsteve 12y ago

Should be called Hawt.JS

scott_karana 12y ago

Firefox 33.0.2 on OSX 10.9 here. It renders well if the tab is in focus (fantastic work!) but there's a bug: if I open it in a tab in the background, and visit it later (after the animation would have completed?) I see only a nearly-blank page. Confused me for a bit, as I open mass-tabs here on HN...

andrewrice 12y ago
Same here (Chrome 38 on Win 8.1)
popey456963 12y ago
I get the same problem, tried on both Chrome and Internet Explorer (Windows 7).
cturhan 12y ago
I guess OP doesn't use requestAnimationFrame, otherwise, it would wait for the tab being focused. Edit: Checked the code. He uses requestAnimationFrame.
- pgsuckz 12y ago
  You meant the opposite though, right?
experimental- 12y ago
In Linux, I get a varying, incomplete image with Firefox (33) and nothing with Chrome (38).
andrethegiant 12y ago
The Page Visibility API would help fix this. https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API https://developer.mozilla.org/en-US/docs/Web/Guide/User_expe...
maemre 12y ago
I got the same problem with Safari 8 on OS X 10.10

thedz 12y ago

Hey! Guy who did the Polygon PS4 and Xbox review SVG animations here. This is really great stuff; has a super friendly API to boot. FWIW, we also released a generalized library for some of the things we were doing WRT frame-based and duration-based animation: https://github.com/voxmedia/metronome https://github.com/voxmedia/metronome (Reason being that for some animations, we wanted it to finish in a precise amount of time, but for others, maintaining frame rate was paramount, even if total elapsed time was longer)

deleted 12y ago

[deleted]

thrush 12y ago

Really silly request, but could someone provide an implementation where I can just drop in an svg and it would have this effect? Please, and thank you.

boomskats 12y ago
Have a look at lazy line painter http://lazylinepainter.info/ http://lazylinepainter.info/
- thrush 12y ago
  Gotcha. The next step is making an animatable SVG. I'm trying to follow https://inkscape.org/doc/tracing/tutorial-tracing.html https://inkscape.org/doc/tracing/tutorial-tracing.html

olso4052 12y ago

Very nice. It's funny, I keep clicking on these 'new JS library' links thinking, oh geez, not another one... but then I leave thinking, wow, that is very impressive and super useful.

sighlent 12y ago

I made this http://grayarea.org/theater/ http://grayarea.org/theater/ after being inspired by the Polygon animations. I'm using Two.js https://github.com/jonobr1/two.js https://github.com/jonobr1/two.js to do the SVG interpreting and processing.

yblu 12y ago

This article by Jake Archibald does a good job of explaining the underlying mechanism used by libraries such as walkway.js: http://jakearchibald.com/2013/animated-line-drawing-svg/ http://jakearchibald.com/2013/animated-line-drawing-svg/.

anubhabb 12y ago

Link broken?

idid 12y ago

A bit of trouble on OS X Yosemite, running Chrome. if i open it an new tab, nothing happens. cmd + r and it works.