The 7 Best Resources for Web and Mobile App Animations
A user's experience is driven by the interactions between the person and the interface. On web and mobile platforms alike, subtle motion is an increasingly popular way to add value and delight.
Today developers can integrate an entire palette of HTML5, CSS, and Javascript based animations for both mobile web and native applications. This means that however users access your content or services you can provide them with the same fantastic experiences.
In this article I will present a list of my 7 favorite animation libraries. Some are well-known and others less so, but all will add eye-catching motion to your UI.
Mobile Web
1. Animo
Animo's CSS and JS library is full of different styles that can create a common and seamless theme and feel across desktop and mobile.
Animo's approach for managing CSS animations allows for capabilities that many others don't. With Animo you can stack animations, create consistent animations across browsers, and establish trigger sequences which allows more versatility for developers.
2. Velocity.js
Velocity by Julian Shapiro is an animation API that works with and without jQuery. It adds very little page weight and provides a vibrant, modern feel. Although Velocity works alongside jQuery, it uses its own method of animation layering that allows it to operate quickly and efficiently.
3. Blast.js
Blast.js, another Julian Shapiro project, is a unique animation library for typography and supports four text delimitation types: character, word, sentence, and element. Ultimately Blast.js is a smart library that matches verbal text phrases and other text manipulation tools. The best part is that Blast.js can be removed with just one function call which makes it a handy tool for a developer animation toolbox.
4. Web Animations Directory
Web Animations is a directory of a select group of stand alone web animations (Including one of SitePoint's favourites, Animate.css). The site allows you to switch between an animation's code and demo, providing solid starting points for inclusion in your projects.
Mobile
5. Yalantis
Yalantis is mobile app development group from the Ukraine keen on giving back to the developer community, specifically with a library of cool, intricate animations. Menu layouts, refresh animations, Star Wars inspired transitions and other expanding movements that are great for animation options on both Android and iOS.
6. Captivate
Capptivate.co is not a library for developers to use, but rather a library highlighting innovative animation use in published iOS applications.
The library is divided into patterns and components demonstrating basic motion, camera effects, grow and shrink, gravity and many other inspirational implementations.
7. Android Arsenal
This Android-specific community lists animation related libraries, tools, and public projects for your projects. Android Arsenal does a great job categorizing these different resources making it easy to sift through their pages of available Android animations. You're even able to sort the animations category by Registration, Last update, Rating, or Name.
Android Arsenal steadily updates their Twitter with new additions to the directory.
Conclusion
Animation libraries for both mobile and desktop are constantly growing and improving. I hope you find the resources introduced above useful to bringing life and character to your applications and look forward to your feedback on what I included or missed.