Today we have decided to showcase a 'map' of the current state of web animation by compiling highly regarded libraries, frameworks and plugins based on their versatility and performance.

Infographic 1: The Map of Web Animation

The infographic is divided into three sections, the first part is a selection of a few of the most comprehensive animation libraries which offer up all the tools one could ever wish for from easing functions and callbacks to timing control, not to mention the generic animation functions we have come to expect. We have segregated libraries which use CSS3 transition to animate elements from libraries which call on JavaScript instead. We have also selected libraries geared towards animations for SVG, WebGL or HTML5 Canvas.

Infographic 2: List of Tools

The second section is dedicated to the various methods for animating UI elements and any others objects in the DOM like scroll animation, parallax, sprites, 3D transformations, physics engines, and transitions.

Infographic 3: Performance Tips

Last but not least, the third section lays out some basic performance tips to help choose between CSS or Javascript-based animation depending on the requirements of any given project.

The B2 posters (50 x 70cm) are FREE and available for downloading and printing. Get yours NOW! All you need to do is SHARE it on Twitter.

We're sure you're aware of the controversy surrounding the performance of CSS and JavaScript-based animations, and you'll know that you have your fair share of performance tests to choose from. The final decision ultimately comes down to the unique requirements for each and every project that lands on your desk depending on the browsers versions, devices... Well, nobody told you it would be easy.

Articles to Read

All we can do is recommend a couple of interesting articles and opinions that ought to give you a helping hand when the time comes to make your decision.

• Myth Busting: CSS Animation vs. JavaScript by Jack Doyle was recently published in CSS-Tricks. Doyle gives us a general feel for JavaScript-based animation performance compared with directly animated CSS components.

  CSS Animations and Transitions Performance: Looking inside the Browser by The Adobe Web Platform Team. We recommend you read this piece which perfectly explains browser rendering processes and issues.

• The third, and perhaps the most notorious article comes from Paul Irish: Why Moving Elements with Translate() is better than Pos:abs Top/Left.
• Paul Irish makes another appearance alongside Paul Lewis to discuss High Performance Animations.
• Not to be outdone, here comes Paul Lewis again with his insightful article on animation performance: Leaner, Meaner, Faster Animations with requestAnimationFrame.

Featured Tools

• Scrollreveal.js

  

  Declarative on-scroll reveal animations. An open-source project by @JulianLloyd.

• SVG.js

  

  SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity

• Jquery Plugins

  

  Three.js is a lightweight JavaScript library/API used to create and display animated 3D computer graphics. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.

• Agile CSS3 Engine

  

  Agile uses javascript to generate pure CSS3. No canvas no webGL no svg. In mobile devices Agile's performance is perfect ,It really can cross platform.

• Jaguarjs (Collie)

  

  Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both desktop and mobile using HTML 5 canvas and DOM. Collie has an optimized render method for each platform.

• Effeckt.js

  

  A Performant Transitions and Animations Library. CSS-based transitions using hardware-accelerated properties.

• Skrollr

  

  Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.

• Clickstream.js

  

  jquery plugin for add an effect to a page transition

• Parallax.js

  

  Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

• Stellar.js

  

  Parallax has never been easier. Add some simple data attributes to your markup, run $.stellar(). That's all you need to get started. Scroll right to see Stellar.js in action.

• Physics.js

  

  PhysicsJS is a modular, extendable, and easy-to-use physics engine for javascript.

• Animate.css

  

  Cross-browser CSS3 animations. Plug and play. Do a little dance.

• Matter.js

  

  html5 javascript physics engine withphysical properties, rigid bodies, collisions, canvas renderer, WebGL renderer, mobile-compatible and Original JavaScript physics implementation

• Box2dweb

  

  The Box2D is a complete physics engine was developed by Erin Catto.

• Morf.js

  

  A JavaScript work-around for hardware accelerated CSS3 transitions with custom easing functions.

• Snap.svg

  

  Snap.svg is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen.

• Impress.js

  

  It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

• Transit

  

  Super-smooth CSS transitions & transformations for jQuery.

• Morpheus

  

  Morpheus lets you "tween anything" in parallel on multiple elements; from colors to integers of any unit, with easing transitions and bezier curves, including CSS3 transforms (roate, scale, skew, & translate) All in a single high-performant loop utilizing the CPU-friendly requestAnimationFrame standard.

• Sly

  

  JavaScript library for one-directional scrolling with item based navigation support.

• Superscrollorama

  

  The jQuery plugin for supercool scroll animation.