
Mo.js: motion graphics toolbelt for the web - hunvreus
https://github.com/legomushroom/mojs
======
alfonsodev
I think it's worth to check the workflow video[1], how it is to actually build
those animations. It really surprised me positively! [1]
[https://vimeo.com/185587462](https://vimeo.com/185587462)

~~~
timdorr
Wow, I'm surprised mojs-player and mojs-curve-editor aren't right at the top
of the README and the website. Those are awesome tools!

The best part is they don't try to do too much. Since you invoke them via
code, not some all-in-one editor, that makes it much easier to go back to your
code when you're done. I feel like that transition is most of the problem when
dealing with other tooling (see Photoshop's "copy layer style as CSS").

~~~
legomushroom
Thanks! They were designed to make only one isolated thing and be "debugging"
tools instead of creating the entirely new environment as you can get in most
animation tools.

So the idea was: you have your page -> you add debugging tools -> craft your
animations -> remove the tools and animation still there.

Also, since project's resources are limited - we had to make those simple
tools and then connect them to something more matured like
[https://github.com/legomushroom/mojs-timeline-
editor](https://github.com/legomushroom/mojs-timeline-editor) (which is in the
process right now). This way we are able to release MVP early and get feedback
early while constantly improving the tools.

------
legomushroom
Hi guys, happy to see `mojs` here! I'm the person who've started the project
and would be more than happy to answer any questions you have.

~~~
alfonsodev
Can you recommend a resource for understanding conceptually the basics of
animation applied to UI ? I'm thinking something similar to how Google
explains material design animations[1] I'm always afraid to introduce
animations, I'd like to know if there are some principles I could apply to
create something with "good taste"

[1] [https://material.io/guidelines/motion/material-
motion.html](https://material.io/guidelines/motion/material-motion.html)

~~~
evejweinberg
Alot of thoughts in here about workflow, but also around slide 30, about
principles: [http://slides.com/sdrasner/style-guide-
anim#/](http://slides.com/sdrasner/style-guide-anim#/)

------
usaphp
Why in 2017, where we have 8 core processors and 1080 videocards and games
that look like real life, even my 2016 high specs rMBP starts to blow fans
full speed and lag whenever I try to run this basic animation in the browser,
why these basic web animations require so much processing??

btw Great job with this project, I am going to use it for some ui elements in
my projects, I especially love the twitter stars animation.

~~~
afghanPower
Advanced js animations lag on my desktop computer. (GTX 1080, 16GB RAM, i5
2500k). Javascript apparently isn't that efficient for calculations.

~~~
ashark
Yeah, these are really cool and the player/editor look like some of the good
parts of the Flash editor brought to JS, but judging from performance on my
MBP using this on mobile would be a great way to turn a phone into a hand
warmer, while achieving an astounding 5 FPS of animation.

------
alpb
Slightly off-topic, Chrome on my early-2015 MacBook (16GB RAM) lags
significantly while rendering most of the demos listed in the repository. If
things like this become the norm on the web, one can easily claim that such
technologies are not inclusive to most users of the world-wide-web, who do not
buy a new latest&greatest desktop computer every 2 years.

~~~
legomushroom
`mojs` definitely was created to support old and slow computers(it supports
FireFox from version 4 and IE9).

The problems usually with the Chrome browser because it updates frequently and
the Chromium team changes it a lot, so what was recently woking well might not
work well right now. And problems like these are usually regard rendering
performance and CSS transforms. So the issues you might see are related to the
demos itself(not library) which were highly optimized for recent browsers'
engines and those changed. I will revamp the demos shortly to keep them up to
date.

Also, I often found that heavy animations work much better on mobile devices
like iPhones than at my MacBook Pro mid 2012.

------
Gikoskos
Is "toolbelt" an actual term for a piece of software? Every single week I see
another github project with a completely new term, similar to this one. If
it's real what does it mean?

~~~
Klathmon
I actually really like it.

There's a lot of bikeshedding over terms in this field (especially in web
development!), so calling something a framework vs a library vs a tool vs a
package vs whatever else will eventually cause comment threads about it to be
bogged down in debates on how it's not a "real framework" or that it's too big
to be a tool, etc...

Calling it a "toolbelt" is a perfect word to me, and I really like it. To me
it reads like a collection of "things" which can all be used together for some
purpose.

------
jianshen
This is a fantastic library but one warning based on past experiences is that
you'll hit performance bottlenecks for full screen type animations on mobile
browsers. I ended up re-writing some of my animations in plain old CSS3
transitions to utilize the GPU on Chrome for Android but this library made it
so much easier for me to visualize on the desktop first.

~~~
pedalpete
Are you saying you're re-writing SVG animations into transitions? I thought
SVG was more performant, but can't seem to find metrics and comparison
benchmarks

~~~
jianshen
Yes. I was animating an SVG path's scale from small to beyond full screen
(zoom effect) and Chrome for Android struggled with frame rate. I just pulled
that particular element out of the mo.js Tween handling since its movement was
simple and put it into a CSS3 transition. Things went back to normal after
that and I had a deadline to meet so I didn't really go back and dig into
exactly why.

------
jaimex2
Another powerful animation library for the web with the same issue they all
have: I can't give this to my graphic designers to use.

Am I the only one who thinks we killed Flash and left a void which no one has
filled yet it terms of animating with an intuitive UI?

~~~
Kequc
You're remembering flash with rose tinted glasses I think. It is completely
horrible. If what you want is an animation, render a mp4. If what you want is
a responsive interface css3 and js animations more than fill the void.

------
szx
I would love to see motion and animation get more attention and love from the
JS community, but at the same time I shudder at the potential for abuse.

How do you build a powerful tool and avoid that side effect? D3 is one example
I can think of for a very powerful, yet constrained and focused tool (I would
say opinionated but that word has lost all meaning).

------
sandebert
Is it for desktop only? Tried it on my mobile and nothing happened. Android
7.1.1 with Chrome 55.0.numbers.

~~~
sandebert
Now I tried it on my desktop, found the same demos to be not working. Kind of
strange, because my desktop != my mobile. Finally figured out that I actually
had to _CLICK_ somewhere for something to happen. Easy to miss after seeing
~10 auto-playing demos, I suppose. Still: D'oh!

ALSO: Very cool, well done.

------
_blrj
Awwwards participants have been creaming themselves since this has been
released. Good to see how much progress it's made. It's certainly right there
next to GSAP as a designer tool.

~~~
KaoruAoiShiho
Can you talk a bit about how this compares to GSAP as a designer tool?

~~~
andrewmcwatters
It's traditionally known that design firms like the ones in the Awwwards and
dribble communities use GSAP to manually create motion design chains where CSS
animations fall short. Sometimes the generation of these are even automated
from Adobe tools.

Mo.js was released as a proof of concept a while back, but has matured into a
similarly designed library with a much more precise focus on motion design.
While GSAP didn't explicitly ever state it was for such a purpose, a
significant number of designers use the library for exactly that in very large
clients' animations.

------
mendeza
Amazing work! What was the motivation for this project? Was it that motion
graphics tools for web don't exist, or the tools that exist weren't good
enough?

------
albertTJames
One of those days you really love HN :) This looks amazing

------
adamredwoods
The demos look nice, but I'm not a fan of dependencies (Babel or Stylus). Are
there any raw js + css code examples?

~~~
legomushroom
Thank you! `mojs` has no dependencies at all, you can find some examples in
the docs that are in the /api folder. There is very basic one:
[http://codepen.io/sol0mka/pen/ZpvLzX/](http://codepen.io/sol0mka/pen/ZpvLzX/)

------
ssiddharth
This looks extremely well done. Great job with the docs too! Gives me
something to dig into over the upcoming weekend.

------
invious
holy moly so much code for the demo animation

------
Kinnard
I wonder what sort of svg support there is.

~~~
Kinnard
Seems to be built on top of svg:
[https://github.com/legomushroom/mojs/search?utf8=%E2%9C%93&q...](https://github.com/legomushroom/mojs/search?utf8=%E2%9C%93&q=svg)

