Recognition and prestige for Web Designers and Agencies

Web Animation Infographics: A Map of the Best Animation Libraries for JavaScript and CSS3 plus Performance Tips

Libraries, Frameworks, Plugins, and Performance Tips to Animate DOM Elements, UI, Canvas, and SVG

  • Share on Google
  • Share on Stumbleupon
  • Share on Pinterest
  • Share on Linkedin

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.

Web Animation Infographic

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.

Web Animation Libraries

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.

Web animation 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.

Web Animation Poster Download

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.

Featured Tools

  • Share on Google
  • Share on Stumbleupon
  • Share on Pinterest
  • Share on Linkedin
Awwwards Team

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the globe can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

PAY BY TWEET AND DOWNLOAD THE INFOGRAPHIC

We'd like you to help us spread the word about our work. We'd be very grateful if you share it with your followers with a Tweet... Thanks!

TWEET NOW! NEXT STEP

DOWNLOAD THE INFOGRAPHIC

Select the format of your choice to start the download.

PDF