I felt bad that my impulse coming from that page was to come here and complain about the use of (and poor definition of) 'async.' Imagine my relief when it was already tackled!
The good news is this is really quite beautiful and I like the fact that - unlike other monolithic js animation libraries that do similar things like Raphael - it's super slim.
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!
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)
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?
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.
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
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.
https://github.com/maxwellito/vivus#firefoxFor 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.
Since the "async" animation is the only one that is synchronous, it seems a bit misnamed!