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

Mo.js: motion graphics toolbelt for the web

github.com

406 pointshunvreus62 comments

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

Wow those embedded curve editors with copy and paste conversion into final code are a terrific idea. I've not seen that workflow before, but it is inspired!

Curve editors are heavily used by animators in most animation packages like Maya. The fact that it's supplied for a Javascript library like this shows the creators have really done their homework.

Yes, sorry, it wasn't the animation curves, but the workflow, of having them editable on the page, storing their data b/w reloads, and asking them for their own replacement code when done. That's very cool, and applicable to a lot of cases. In fact,makes me wonder if it isn't a better way of doing live coding generally: rather than inferring stuff, have a simple API for exposing inline editors.

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

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

That workflow is amazing! TYVM for the link.

This is really impressive. It helps that whoever is building these is clearly really talented in 2d animation.

This is incredible, truly a work of art.

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.

I've been following this project since the very first time I saw it on Codepen [0].

You've done an amazing job creating an amazing library. One that I advertise every opportunity I get. Thank you!

[0] http://codepen.io/sol0mka/pen/ogOYJj

Thank you, Nadya! It has a lot of unreleased features so stay tuned!

How does a project like this get started / maintained? It's incredibly well done, looks like a ton of work went into it. Is it a side project or apart of some bigger org?

Hi, thank for the question!

I was doing a lot of animation work and there was a lack of animation tools I've got used to, so I've started to write modules myself. After a while, I noticed the system in what I've written so decided to release it.

As for maintaining part - it is heavily covered with unit and environmental tests, of course, it adds some overhead but ensures that your tool is robust and works in every browser.

It is a side project and we still expect more contributions from the community.

This is a bit off topic but I'm curious what your background is in? I noticed that not only is your visual design good but also your sound design as well. Were you in animation and media and decided to pick up coding or the other way around?

In any case, thank you for creating this and hope to see this project continue to grow.

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

Detailed article about how to concept motion for your brand: http://alistapart.com/article/designing-interface-animation

Salesforce internal document: https://www.lightningdesignsystem.com/guidelines/motion/

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

Say I have three circles moving somewhat randomly through the screen. How do I draw lines through them so they form a triangle?

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.

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

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.

Do you use firefox?

I'd guess that javascript is not as fast as C++, and the animations are not hardware accelerated.

A combination of JS and the DOM. The latter being the main culprit if you're moving actual dom elements as opposed to canvas or webgl.

I have a recurrent issue where I have two graphics cards in my laptop (it's practically a standard for years now). A decent high power card, and a simple low power card maybe integrated into the processor.

When you start an application, one of the two cards will handle that application.

I generally can't my browser with the high power card; probably because browser vendors don't want to sacrifice battery life all of the time for some fancy effects a small slice of the time.

But I'm no expert. Chrome seems to handle things better than Firefox, that's why I still have it.

Out of curiosity, are you running an Nvidia card? (This may apply to radeons as well, but I don't have any experience)... For the NVidia drivers at least, there is an option to select which graphics card to use on a per-application basis. Normally the drivers default to auto-selecting what it thinks is best, but you can override that in cases like this.

Are you talking about Mojs animations or web animations in general?

Must be something wrong with your computer / browser. With my 2011 iMac it is absolutely smooth, and there's no increase in CPU use. It's the same on iPhone 6, and it doesn't warm up at all.

Have you tried running any examples from threejs? Is it smooth too?

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.

I have a Zenbook UX32LN from 2015, with 12GB RAM, elementaryOS linux installed as a system, and on Firefox they work like a charm! Try it on different browser or update chrome?

Weird :/

It works well in Firefox on my desktop from 2009 (with 4GB of DDR2) … Do you also have performance issues in Safari or Firefox ?

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

On a mid-2011 MBP with severe performance issues running stuff like Atom, but these animations work fine for me with zero lag. Something is wrong with your computer.

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?

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.

Open source software today is all about being fashionable: picking a fresh term helps you stand out in the crowd.

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.

I wonder why this lib doesn't use CSS transitions.

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

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.

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?

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.

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

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

Worked like a charm on my iPhone 6 FWIW

Works on my updated Android 6x, latest chrome.

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.

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.

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

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.

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?

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

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

the very first demo doesn't use Babel: http://codepen.io/sol0mka/pen/ogOYJj

As for the Pug and Stylus in that demo, you can view the compiled HTML or CSS within CodePen, it's in the little dropdown arrow in the top right corder of each box

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/

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

holy moly so much code for the demo animation

I wonder what sort of svg support there is.

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

Reply on news.ycombinator.com