

Vivus, bringing your SVGs to life - plurby
http://maxwellito.github.io/vivus/

======
hughes
> They all start and finish at the same time, hence the name `async`.

Since the "async" animation is the only one that is synchronous, it seems a
bit misnamed!

~~~
TazeTSchnitzel
Yes, surely the "delay" one should be Asynchronous, the "async" one should be
Synchronous and "one by one" should be Sequential.

~~~
mankyd
async and sync aren't even the correct terms here. Parallel, Serial, and
Staggered seem more apropos.

~~~
burntcaramel
Maybe instead of Delayed, Async, OneByOne, have: Staggered, Together, OneByOne

Keep the names friendly and not too technical.

------
l00mer
Sorry, I can't use software that isn't "made with love". Consider revising.
You might also consider having your code snippets hosted with ❤.

Kidding of course -- the love that went into this is self-evident.

~~~
pimlottc
I initially misread the footed as "Make love with a keyboard" :P

------
codezero
This technique reminds me (aesthetically) a lot of the drawing of RIP images
[1], though that only happened because they took forever to download :)

[1]
[http://en.wikipedia.org/wiki/Remote_Imaging_Protocol](http://en.wikipedia.org/wiki/Remote_Imaging_Protocol)

~~~
Domenic_S
Oh _WOW_ , it's been forever since I thought about RIP. Memories of graphics
coming across at 2400 baud...

~~~
codezero
Yep! RIP and even animated ANSI opened up some cool animations when it was
exploited to make things like simulated motion and stuff like that, the good
old days!

------
timmaah
The strokeDashOffset trick is a great hack.

I used it to animate a route on a US map.
[http://live.watsonswander.com/](http://live.watsonswander.com/)

------
plurby
You can see an great example of Vivus in use at Estée Lauder
[http://www.esteelauder.com/boutiques/the-
classics/index.tmpl](http://www.esteelauder.com/boutiques/the-
classics/index.tmpl)

------
Edmond
love it!

Fellow SVG nut :
[https://s3.amazonaws.com/macslow/index.html](https://s3.amazonaws.com/macslow/index.html)

~~~
neic
They look good. However, clock8.svg is broken in Chrome 40 on OSX 10.10.

------
WickyNilliams
Had to do some similar animations recently. Wrote up a super simple function
that can be combined with any easing function, and where you're in full
control of the animation progress.

It's not specific to SVGs and doesn't do very much on it's own. Thankfully,
you can use off-the-shelf easing functions and higher-order functions to have
time/frame/whatever-based animation progress (e.g. as an advanced example, i
actually utilised the accelerometer as input for animation progress)

Check app.js for example of fading element's opacity and animating an SVG path
[https://gist.github.com/WickyNilliams/af30ad9b1557f894efab](https://gist.github.com/WickyNilliams/af30ad9b1557f894efab)

------
deanclatworthy
This looks great. I like how it normalises the shapes into paths too. But are
there any tools to do this for the command line that "simplify" SVGs so your
library won't have to worry about this?

~~~
bshimmin
It seems like it wouldn't be a Herculean task to take pathformer.js and turn
it into a standalone CLI utility:
[https://github.com/maxwellito/vivus/blob/master/src/pathform...](https://github.com/maxwellito/vivus/blob/master/src/pathformer.js)

~~~
bshimmin
Quick and dirty, but this does the trick I think:
[https://gist.github.com/benshimmin/4bd6bb9cb8733a6acba7](https://gist.github.com/benshimmin/4bd6bb9cb8733a6acba7)

------
dperfect
This is great, though none of the examples have any fills - just stroked
paths.

From what I understand, this would not work with filled paths (or it would
only animate a stroke, not the fill), right?

~~~
ygra
It's a hack with path strokes to make it appear as if being drawn, so yes it
won't work with fills. Although if you approximate the fill with a zig-zagged
stroke you could get a good impression of an animated, drawn fill as well with
this.

------
andreaferretti
Really nice and easy to use! I have added an example to the Paths.js demo
where I show how it can integrate with Vivus to provide animation of the
generated paths

[http://andreaferretti.github.io/paths-js-react-
demo/](http://andreaferretti.github.io/paths-js-react-demo/)

------
vanderZwan
This looks awesome, but as someone who never uses SVGs in practice: what kind
of gotcha's should I look out for when using this? I'm thinking incompatible
SVGs, performance issues due to abuse, that kind of thing.

------
mintplant
I feel like this has been posted before--I recognize the aperture demos--but I
can't find the thread. Any ideas? Did this change names?

------
nperez
this could potentially be a really cool alternative to a 'spinner' on initial
load of an app.

~~~
sehr
Coursera does something like this IIRC

------
_ZeD_
I see some strange "dots" floating before the start of the animation, with
firefox

~~~
puffyrice
[https://github.com/maxwellito/vivus#firefox](https://github.com/maxwellito/vivus#firefox)
_For Firefox users, you might encounter some glitches depending on your SVG
and browser version. On versions before 36, there is a problem to retrieve
path length via getTotalLength method._

------
andrewljohnson
Is this going to be cool if I use it with Rickshaw? Because it seems like it
might.

------
dmamills
This is super cool! Good work!

------
Tomlinden
Awesome

------
searine
Oh that's nice.

