8 ms·
Vivus, bringing your SVGs to life
- Edmond 12y agolove it! Fellow SVG nut : https://s3.amazonaws.com/macslow/index.html https://s3.amazonaws.com/macslow/index.html
- neic 12y agoThey look good. However, clock8.svg is broken in Chrome 40 on OSX 10.10.
- dmamills 12y agoThis is super cool! Good work!
- andrewljohnson 12y agoIs this going to be cool if I use it with Rickshaw? Because it seems like it might.
- codezero 12y agoThis 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
- Tomlinden 12y agoAwesome
- deanclatworthy 12y agoThis 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 12y agoIt 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/pathformer.js https://github.com/maxwellito/vivus/blob/master/src/pathform...
- bshimmin 12y agoQuick and dirty, but this does the trick I think: https://gist.github.com/benshimmin/4bd6bb9cb8733a6acba7 https://gist.github.com/benshimmin/4bd6bb9cb8733a6acba7
- premasagar 12y agoYes, SVGO is really good at this and other kinds of SVG optimisation and manipulation: https://github.com/svg/svgo/ https://github.com/svg/svgo/
- hughes 12y ago> 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 12y agoYes, surely the "delay" one should be Asynchronous, the "async" one should be Synchronous and "one by one" should be Sequential.
- mankyd 12y agoasync and sync aren't even the correct terms here. Parallel, Serial, and Staggered seem more apropos.
- burntcaramel 12y agoMaybe instead of Delayed, Async, OneByOne, have: Staggered, Together, OneByOne Keep the names friendly and not too technical.
- nkozyra 12y agoI 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.
- nippoo 12y agoIs it called "async" because they're All Synchronised? Bit of a long shot, but it's the most logical thing I could think of...!
- mintplant 12y agoI 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?
- searine 12y agoOh that's nice.
- l00mer 12y agoSorry, 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.
- nperez 12y agothis could potentially be a really cool alternative to a 'spinner' on initial load of an app.
- sehr 12y agoCoursera does something like this IIRC
- dperfect 12y agoThis 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 12y agoIt'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.
- plurby 12y agoYou 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
- timmaah 12y agoThe 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/
- _ZeD_ 12y agoI see some strange "dots" floating before the start of the animation, with firefox
- puffyrice 12y agohttps://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.
- vanderZwan 12y agoThis 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.
- andreaferretti 12y agoReally 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/
- WickyNilliams 12y agoHad 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