Best Animation Frameworks: Animate.CSS vs Motion UI

Animation on the web has changed. It’s being moved from the realm of UI design and decoration, to the province of UX design. Where once it was a frivolity, it’s becoming an indispensable tool. No more dancing baby gifs. We’re using animation to tell users what’s going on in our interfaces, and why. We’re using it to tell them where to go and what to do next.  And yeah, we’re still making things move around on the screen for fun. This is all good news. We’ve gotten here partially thanks to flat design. Without the 4D-ish graphics that we relied upon to provide direction, we’ve got to use animation to provide instant, almost tactile feedback to the user. Small UI animations, when applied right, can make the user feel like they’re using a real physical product. We’re also at this point because animation has gotten easier, and more easily controlled. It is no longer inextricably tied to JavaScript. A little CSS can make the browser itself do the heavy lifting. Mobile apps have been another factor. After many web users got used to the sort of animated feedback given to us in native apps, they wanted to see it happen in web-apps and interfaces. Sure, animation might have been in the CSS3 spec for years, but now the browser developers are in on it too. And it’s about time.

Animate.css vs Motion UI

Another thing that happens when developers get in on something is the sudden, almost magical appearance of frameworks for that. We’ve had animation frameworks before. We’ve even had CSS-based animation frameworks before. What we haven’t had are these two frameworks. Animate.css and Motion UI are different beasts. We’re here to tell you what they can do, and when you should pick one over the other. As usual, it’s not about which library is better, but which is better for your current project. Let’s have a look.

Animate.css

More animations

Animate.css definitely has more animations to choose from. While it’s not the complete solution to every animation need, it has a bunch. They’re categorized for easy browsing, and they range from basic universal animations to a few that are obviously just for fun. And hey, why shouldn’t animation be fun?

It’s just easier

Of the two frameworks, I’d say this is the easier one. Easier to integrate into any project: it’s just a CSS file, after all. Link it in your head tag, add some classes to each element you want to animate, and go. It really is as simple as that. Plus, you can customize the animations easily enough in your own CSS. The whole thing is built for simplicity. Whether you’re using Rails, Node.js, PHP, static HTML, Python, or some .Net-based monolith, Animate.css will just work.

jQuery-friendly

Because the framework is class-based, jQuery is an obvious and easy way to create more complex interactions involving animation. Anyone with even the most basic knowledge of jQuery can make animations happen on a click, and move on up from there. Here an example of how to use Animate.CSS with jQuery.

Create custom builds

You might not want the whole framework for every project. A good way to streamline it would be to build your own version with Grunt. It requires you to know how to work with Grunt, sure, but you can always go into the stylesheet and just delete all the animations you don’t want.

Motion UI

It’s made by Zurb

Remember Zurb, the people that made Foundation, and Foundation for Apps? Yeah, this is their work.  And because it’s their work - and because we tried it - we know this:

• It runs fast. Zurb’s products are always made with speed in mind. This includes mobile devices.
• It is fairly simple to implement.
• It is as cross-platform as possible. Zurb doesn’t half-bake this stuff. They test their work extensively.

And hey, if something goes wrong, there’s a whole support team you can complain to. It’s pretty great.

Tight integration with Foundation for Apps

So here’s the other thing to consider. It was once bundled with Foundation for Apps, but is now its own library. Still, if you’re using FfA, this is what you should consider:

• This library is app-focused. It has fewer animations, but they are optimized for performance. And hey, when you’re trying to build a web app, you want things to feel as native as possible.
• There is also very good integration with AngularJS.

Based on SASS

One cool feature is that, since Foundation for Apps is based on SASS, you can customize all animations with it. This makes the library incredibly flexible and easy to adapt to your project.

Installation options

There doesn’t seem to be any options for Grunt, but it works with NPM and Bower. Of course, you can download the repository and install it manually.

Conclusion

I’d say that Animate.css is about giving easy animation to everyone. A novice can integrate it into their project by just linking the CSS file; and a pro can build it into their workflow with Grunt. Motion UI is extensively tested, widely supported, and fast, though it has fewer animations. It’s extremely customizable, and perhaps a bit more developer oriented. If you’re already using SASS or Foundation for Apps, go with this one.