
Mo.js – motion graphics for the web - brbcoding
http://mojs.io/
======
TrevorJ
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
I 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)

------
nullstyle
The tutorial section is broken as hell, unfortunately.

~~~
nacs
Works fine for me in Chrome.

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

~~~
nacs
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
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
Hm? Can you give an example where you would need to use an imperative API?
Plus, .run() is imperative.

~~~
erikpukinskis
Adding additional elements on tap?

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

~~~
zackify
let's just make a wrapper :D

~~~
lobster_johnson
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
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
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](https://github.com/twitter-fabric/velocity-react#readme)

------
Bjorkbat
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
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
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...](https://www.shopify.com/technology/17105760-building-year-in-
review-2014-with-svg-and-rails)

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

------
chinchang
its finally here. So excited to use this.

