6 ms·
Mo.js – motion graphics for the web
- pedalpete 11y agoThough animations like these are nice, can somebody give some examples of svg animations that are a part of the usable interface? For example, we have animating buttons and panels and UX elements, which I can't imagine doing in SVG. Waiting bubbles, etc. are great, I'm just not sure of the widespread value. Happy to be shown a different view though.
- capex 11y agoI think this could be used for creating explainer graphics.
- armandososa 11y agoThe new heart animation of Twitter looks like something that could've been done this way.
- ogig 11y agoShopify uses animated svgs in the admin panel ui, they even wrote a nice blog post about it. >A lot of the feedback we’ve gotten from front-end developers has been along the lines of “that’s cool! Did you use images or CSS for [that effect]?” In most cases, the answer was actually neither, because most of the fun graphics, animations, and effects rely heavily on SVG with a bit of JavaScript and some clever Rails helpers. https://www.shopify.com/technology/17105760-building-year-in-review-2014-with-svg-and-rails https://www.shopify.com/technology/17105760-building-year-in...
- grrowl 11y agoI thought the bubble demo was pretty cool: http://codepen.io/sol0mka/full/yNOage/ http://codepen.io/sol0mka/full/yNOage/
- nullstyle 11y agoThe tutorial section is broken as hell, unfortunately.
- nacs 11y agoWorks fine for me in Chrome.
- teddyh 11y agoThis is motion graphics for the web, not motion graphics for Chrome.
- nacs 11y agoMy statement was to confirm which browser it does work in to narrow it down. You may want to state which browser you're having problems with to the developer instead of making a useless remark like the one you just made.
- pixelHD 11y agoWindows 10/Chrome 47(x64) links don't work for me
- shash7 11y agoI second that, the links on the sidebar are not clickable.
- Gxorgxo 11y agoSame here, I can only see "Easing / Path Easing".
- lobster_johnson 11y agoAs always with front-end libraries these days, my first question is: Does it play nice with React?
- zackify 11y agolet's just make a wrapper :D
- lobster_johnson 11y agoReact generally requires more than just a wrapper, since its virtual DOM is populated in a highly controlled manner that libraries need to follow. But you can try.
- btown 11y agoActually it's pretty trivial. You can always just have your render function be just a static div, set a ref to the div, and do setup in componentDidMount and updates in componentWillUpdate. Since the render function will always return a trivially identical subtree, it will never change that DOM node. Of course, if your component moves in the HTML hierarchy, your animation may restart, but that's unlikely in most use cases.
- lobster_johnson 11y agoDepends. Animation tends to be about transitions, so you want to transition between elements. For that you need to handle the virtual DOM. Twitter's Velocity [1] wrapper is an example of something that works like this, though the authors admit their solution is not idiomatic React. [1] https://github.com/twitter-fabric/velocity-react#readme https://github.com/twitter-fabric/velocity-react#readme
- nkozyra 11y agoAs opposed to, say, server-side graphical libraries for the web?
- andrewmcwatters 11y agoI remember seeing the initial demo of this back when it was debuted. Glad to see it worked on!
- TrevorJ 11y agoThis is really cool. I'd love to see some sort of visual front end where you can set up your timeline and change position, tweening, and the like. I wonder how practical an exporter for After Effects would be? If this is made more accessible for artists, that would be awesome.
- _neil 11y agoI haven't used this, but you might want to check out Bodymovin: http://codepen.io/airnan/details/PqjwYM/ http://codepen.io/airnan/details/PqjwYM/ https://github.com/bodymovin/bodymovin https://github.com/bodymovin/bodymovin
- wildpeaks 11y agoYou can use XML Gibson (http://aescripts.com/xml-gibson http://aescripts.com/xml-gibson) to export animations
- Bjorkbat 11y agoThis is great. I've been wanting to play around with motion graphics for a while now but am kinda on the fence about learning process. This is much more aligned with my style.
- erikpukinskis 11y agoIt's interesting, declarative APIs are amazing for a demo... A single function call can make literally anything possible. But when you eventually want to do something interactive, a declarative API can't work, and you need to learn a separate imperative API anyway... At which point what was the point of the declarative one in the first place?
- davidkpiano 11y agoHm? Can you give an example where you would need to use an imperative API? Plus, .run() is imperative.
- erikpukinskis 11y agoAdding additional elements on tap?
- chinchang 11y agoits finally here. So excited to use this.