

Walkway.js - connoratherton
http://www.connoratherton.com/walkway

======
thedz
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)

------
sergiosgc
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
Switched to Google domains a few days ago, still configuring it properly.
Thanks for letting me know about the link, looking into it.

~~~
Zaheer
Do you happen to have any extra invites for Google domains?

~~~
ecesena
I do if still needed, drop me a line (email in profile)

------
scott_karana
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...

~~~
cturhan
I guess OP doesn't use requestAnimationFrame, otherwise, it would wait for the
tab being focused.

Edit: Checked the code. He uses requestAnimationFrame.

~~~
pgsuckz
You meant the opposite though, right?

------
connoratherton
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
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
No you're not :)

------
sighlent
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
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/).

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

------
thrush
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
Have a look at lazy line painter

[http://lazylinepainter.info/](http://lazylinepainter.info/)

~~~
thrush
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)

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

------
chadillac
Nice work, looks great.

~~~
bengali3
agreed!

------
TheAceOfHearts
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-...](https://www.dropbox.com/s/z57g1fmmn10qmej/Screenshot%202014-10-31%2010.14.42.png?dl=0)

------
liminal
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.

------
olso4052
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.

------
lnanek2
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

------
drunken_thor
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

------
coob
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
Works great for me on Safari 8 (Yosemite)!

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

~~~
na85
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
"server not found".

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

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

~~~
RBerenguel
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/20141030fdec7fda61eafac3b8dca58...](http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58899defb9e)

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)

------
rmtutty
Site's not available?

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

------
cdnsteve
Should be called Hawt.JS

------
jerrysievert
not working in Safari with Yosemite.

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

------
anubhabb
Link broken?

