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").
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.
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 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.
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?
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"
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.
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.
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.
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.
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.
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?
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.
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.
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).
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!
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.
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?
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/
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
