The Top 9 Animation Libraries for UI Designers in 2017

From SitePoint
May 16, 2017 - 11:30am
Frontend design has been through a revolution in the last decade. In 2007, most of us were still designing static magazine layouts – in 2017 we're building 'digital machines' with thousands of resizing, coordinated, moving parts. Quite simply, great UI designers need to be great animators with a rock-solid understanding of the underlying tech. This is the latest update to our guide to helping you choose the right animation library for each task. We're going to run-through 9 free, well-coded animation libraries best-suited to UI design work – their strengths and weaknesses and when to choose each one. Some are pure CSS. Others are JavaScript, but none require anything more than basic HTML/CSS understanding to be used. Enjoy. The 2017 Top 9 Animation Libraries List Animate.css Bounce.js AnimeJS Magic Animations DynCSS CSShake Hover.CSS Velocity.js AniJS Animate.css Animate.css is one of the smallest and most easy-to-use CSS animation libraries available. Applying the Animate library to your project is as simple as adding the required CSS classes to your HTML elements. You can also use jQuery to call the animations on a particular event. Creators: Daniel Eden Released: 2013 Current Version: 3.5.2 Most Recent Update: April 2017 Popularity: 41,000+ stars on GitHub Description: "A cross-browser library of CSS animations. As easy to use as an easy thing." Library Size: 43 kB GitHub: https://github.com/daneden/animate.css License: MIT As of mid-2017, it still one of the most popular and widely-used CSS animation libraries and its minified file is small enough (16.6kb) for inclusion in mobile websites as well. It has 41,000 stars on Github and is used as a component in many larger projects. Animate.css is still under active development after 4 years. We feel that this is one of the simplest and most robust animation libraries and would definitely recommend you to use this in your next project. Bounce.js Bounce.js is a tool and javascript library that focusses on providing a selection of unique bouncy CSS animations to your website. This project is open-source with its code on GitHub. Creators: Tictail Released: 2014 Current Version: 0.8.2 Most Recent Update: Feb 2015 Popularity: 4,967+ stars on GitHub Description: "Create beautiful CSS3 powered animations in no time." Library Size: 1


Continue reading this article »