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

Demo

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.

GitHub

2. Velocity.js

Demo

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.

GitHub

3. Blast.js

Demo

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.

GitHub

4. Web Animations Directory

Demo

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.

Github

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.

Github

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.

Tags: animation, JavaScript, jQuery
Dennis is currently a contributor for the Huffington Post, YFS Magazine and many others. He has a heavy digital marketing and content background, heading user acquisition for a number of mobile apps and and platforms, both B2B and B2C. He also shares a love for film making!
  • http://topseomarketingplan.com/ lutfar rahman

    Hello, My first visit to your site, I am lutfar just my new seo and marketing blog. I am a newbie and just learning !
    thanks for your great post !

  • mattwooddc

    Given that this article is about animation and javascript, I’m curious why you left out the Greensock library?

  • Stefan

    Maybe behave3d (behave3d.net) is also worth considering for 3D transform animations. It has many different “controllers” and own triggering system (not just a callback on complete). The controllers for animating movement, scaling, rotation and other element/style properties all support transitions with inertia, check the demos on the site.

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!