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
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
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.
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.
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.
Declarative on-scroll reveal animations. An open-source project by @JulianLloyd.
Agile CSS3 Engine
A Performant Transitions and Animations Library. CSS-based transitions using hardware-accelerated properties.
jquery plugin for add an effect to a page transition
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.
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.
Cross-browser CSS3 animations. Plug and play. Do a little dance.
The Box2D is a complete physics engine was developed by Erin Catto.
Snap.svg is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen.
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.
Super-smooth CSS transitions & transformations for jQuery.
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.
The jQuery plugin for supercool scroll animation.