I think this is awesome that ZURB has open sourced Motion UI. I initially saw this as part of ZURB Foundation for Apps which was a dead simple way to add animation to your angular app using Foundation.
I recently worked on a clickable prototype where I used animate.css which is a fantastic project and I have used it a ton in the past.
However, there are three pain points for me when I have used it in the past:
- There was no easy way to easily change the animation timings of individual animations.
- I had to typically remove and then add classes to get the animations to trigger via jQuery.
- I have to copy everything locally into a scss file. I would much prefer a scss file via bower so it is easily upgradable.
Typically when I take a clickable prototype like this and move to production, I will then take the classes I am using from animate.css, rename them, and tweak them as necessary. It works and in animate's defense, it has been around longer and has a larger arsenal of animations. Especially in the attention getter's area.
Here are a few things that I really like about Motion UI.
- It is sass based with bower so it makes it easy for me to implement in just about any project.
- There are classes that allow me to quickly experiment with the speed of the animation.
- There are sass mixins that allow me to use my own class names and keep my own sass/scss files clean
- There is a way to stagger animations via sass.
- It is part of Foundation for Apps and will likely be a part of ZURB Foundation for Sites v6 so learning it has a big payoff for me, because I use ZURB Foundation all the time.
Usually, I would use velocity.js for more powerful complex animation, but I think I might give this a whirl as well since it mostly sits on sass :D
After looking at the docs of this, I feel like https://daneden.github.io/animate.css/ is still much better and more compact.
Animate.css is really cool and we used in tons of projects. Animate.css is also about 4 times larger 69.1 KB vs 18.8 KB.
The goal of Motion UI is to be very customizable and focusses on the most common animations.
Most of these animations are dead simple, you don't need a library to use these. If you're really lazy, you can just copy paste the animated class and the animation keyframe you want, and you get a much smaller footprint.