4 top CSS animation frameworks

Sift through online resources with this list of the best CSS animation frameworks for your projects.

CSS animation frameworks

Powerful animators like Motion UI are useful CSS tools

There are great sources of inspiration online if you're getting started with your own CSS3 animation library. Some you can simply include in your project and start straight away, or you might want to use them to create something custom for your brand or project. If you need more inspiration, you can also find lots of CSS animation and JavaScript examples on CodePen.

Animate.css

This is a solid starting point, containing a massive list of classes you can apply to elements. Simply reference the CSS file, and when you add classes to an element, the animation happens. This works best when adding or removing classes using JavaScript.

Motion UI

This Sass library from ZURB makes it easier to apply custom animations to your UI. It's a little more involved than Animate.css, but very powerful. You can create and tweak animations to meet your needs, then invoke them using JavaScript.

CSS animation framework

GreenSock is capable of creating powerful, complex animations

BounceJS

This is a useful tool if you want to create your own library of animations. It has lots of fun presets and takes the heavy lifting out of writing complex animation code. It uses advanced transform operations to create the animations, which can then be added to your own animation CSS file and applied as you wish.

GreenSock's GSap

GSAP is a JavaScript animation framework. If you're creating more complex animations (such as in banner ads or hero images), GSAP offers a set of tools for handling playback, SVG tweening and more. This is great if you want to go further than what can be done in CSS animations, but does present a bit of a learning curve.

This article was originally published in net magazine issue 279. Buy it here.

ABOUT THE AUTHOR

Donovan Hutchinson is a front end designer and developer who specialises in CSS animation, web design and development.

Topics

CSS