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").
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!
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?
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.
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?
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
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.
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?
[+] [-] alfonsodev|9 years ago|reply
[+] [-] timdorr|9 years ago|reply
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").
[+] [-] sago|9 years ago|reply
[+] [-] teej|9 years ago|reply
[+] [-] gshulegaard|9 years ago|reply
[+] [-] creativityland|9 years ago|reply
[+] [-] legomushroom|9 years ago|reply
[+] [-] jianshen|9 years ago|reply
In any case, thank you for creating this and hope to see this project continue to grow.
[+] [-] Nadya|9 years ago|reply
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
[+] [-] jastanton|9 years ago|reply
[+] [-] alfonsodev|9 years ago|reply
[1] https://material.io/guidelines/motion/material-motion.html
[+] [-] smrtinsert|9 years ago|reply
[+] [-] usaphp|9 years ago|reply
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.
[+] [-] demarq|9 years ago|reply
[+] [-] have_faith|9 years ago|reply
[+] [-] Geee|9 years ago|reply
[+] [-] mtrycz|9 years ago|reply
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.
[+] [-] afghanPower|9 years ago|reply
[+] [-] mixmastamyk|9 years ago|reply
[+] [-] alpb|9 years ago|reply
[+] [-] legomushroom|9 years ago|reply
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.
[+] [-] stymaar|9 years ago|reply
It works well in Firefox on my desktop from 2009 (with 4GB of DDR2) … Do you also have performance issues in Safari or Firefox ?
[+] [-] tothepixel|9 years ago|reply
[+] [-] lukaszkups|9 years ago|reply
[+] [-] Gikoskos|9 years ago|reply
[+] [-] jianshen|9 years ago|reply
[+] [-] pedalpete|9 years ago|reply
[+] [-] colordrops|9 years ago|reply
[+] [-] jaimex2|9 years ago|reply
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|9 years ago|reply
[+] [-] szx|9 years ago|reply
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).
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] sandebert|9 years ago|reply
[+] [-] sandebert|9 years ago|reply
ALSO: Very cool, well done.
[+] [-] smrtinsert|9 years ago|reply
[+] [-] _blrj|9 years ago|reply
[+] [-] KaoruAoiShiho|9 years ago|reply
[+] [-] mendeza|9 years ago|reply
[+] [-] albertTJames|9 years ago|reply
[+] [-] adamredwoods|9 years ago|reply
[+] [-] ssiddharth|9 years ago|reply
[+] [-] invious|9 years ago|reply
[+] [-] Kinnard|9 years ago|reply
[+] [-] Kinnard|9 years ago|reply