Mo.js – motion graphics for the web | Hacker News Reader

Mo.js – motion graphics for the web

mojs.io

189 pointsbrbcoding29 comments

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

I haven't used this, but you might want to check out Bodymovin:

http://codepen.io/airnan/details/PqjwYM/ https://github.com/bodymovin/bodymovin

You can use XML Gibson (http://aescripts.com/xml-gibson) to export animations

The tutorial section is broken as hell, unfortunately.

Works fine for me in Chrome.

This is motion graphics for the web, not motion graphics for Chrome.

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

Windows 10/Chrome 47(x64) links don't work for me

I second that, the links on the sidebar are not clickable.

Same here, I can only see "Easing / Path Easing".

It'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?

Hm? Can you give an example where you would need to use an imperative API? Plus, .run() is imperative.

Adding additional elements on tap?

As always with front-end libraries these days, my first question is: Does it play nice with React?

let's just make a wrapper :D

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

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

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

As opposed to, say, server-side graphical libraries for the web?

Well, yes.

I'll get right on that "I generated a jpeg" post then!

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

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

I think this could be used for creating explainer graphics.

The new heart animation of Twitter looks like something that could've been done this way.

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

I thought the bubble demo was pretty cool: http://codepen.io/sol0mka/full/yNOage/

I remember seeing the initial demo of this back when it was debuted. Glad to see it worked on!

its finally here. So excited to use this.

Reply on news.ycombinator.com