Mo.js – motion graphics for the web

TrevorJ 10 years ago |

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.

_neil 10 years ago | |

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

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

wildpeaks 10 years ago | |

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

nullstyle 10 years ago |

The tutorial section is broken as hell, unfortunately.

shash7 10 years ago | |

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

Gxorgxo 10 years ago | |

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

nacs 10 years ago | |

Works fine for me in Chrome.

pixelHD 10 years ago | | |

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

teddyh 10 years ago | | |

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

nacs 10 years ago | | |

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.

erikpukinskis 10 years ago |

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?

davidkpiano 10 years ago | |

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

erikpukinskis 10 years ago | | |

Adding additional elements on tap?

lobster_johnson 10 years ago |

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

zackify 10 years ago | |

let's just make a wrapper :D

lobster_johnson 10 years ago | | |

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.

btown 10 years ago | | |

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.

lobster_johnson 10 years ago | | |

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

nkozyra 10 years ago | |

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

lobster_johnson 10 years ago | | |

Well, yes.

nkozyra 10 years ago | | |

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

Bjorkbat 10 years ago |

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.

pedalpete 10 years ago |

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.

ogig 10 years ago | |

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

grrowl 10 years ago | |

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

armandososa 10 years ago | |

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

capex 10 years ago | |

I think this could be used for creating explainer graphics.

andrewmcwatters 10 years ago |

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

chinchang 10 years ago |

its finally here. So excited to use this.