Mo.js: motion graphics toolbelt for the web(github.com)
github.com
Mo.js: motion graphics toolbelt for the web
https://github.com/legomushroom/mojs
63 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, 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").
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.
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.
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.
This is really impressive. It helps that whoever is building these is clearly really talented in 2d animation.
That workflow is amazing! TYVM for the link.
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.
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.
In any case, thank you for creating this and hope to see this project continue to grow.
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
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.
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.
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
[1] https://material.io/guidelines/motion/material-motion.html
Alot of thoughts in here about workflow, but also around slide 30, about principles: http://slides.com/sdrasner/style-guide-anim#/
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/
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.
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.
Are you talking about Mojs animations or web animations in general?
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.
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.
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.
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.
`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.
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.
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 ?
It works well in Firefox on my desktop from 2009 (with 4GB of DDR2) … Do you also have performance issues in Safari or Firefox ?
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.
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?
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.
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.
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.
I wonder why this lib doesn't use CSS transitions.
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?
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).
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).
[deleted]
Is it for desktop only? Tried it on my mobile and nothing happened. Android 7.1.1 with Chrome 55.0.numbers.
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.
ALSO: Very cool, well done.
Works on my updated Android 6x, latest chrome.
Worked like a charm on my iPhone 6 FWIW
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.
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?
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/
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
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
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...