7 essential free tools for web animation

CSS andJavaScript are the key powers behind animation on the web. Together, and apart, they can produce stunning and impressive dynamic designs that will work across all browsers. Here we have put together a collection that will give you everything you need to start animating for the web today. 

01. KUTE.js

KUTE.js is a JavaScript animation framework, built with fast code execution and memory efficiency in mind. With everything from two and three dimensional transforms to SVG manipulation, KUTE.js is a strong contender for creating simple and lightweight animations.

02. Anime.js

Anime.js is a JavaScript animation library packed full of features. The library is performant and produces beautiful, seamless animations. There’s detailed documentation on the website and a variety of demos produced by the developer Julian Garnier on hisCodePen.

03. Blotter

Create unconventional text effects with this JavaScript API

Blotter is a JavaScript API for drawing unconventional text effects. Powered by three.js and underscore.js it is capable of producing some weird and wonderful animated text effects. The library offers five different material effects all of which can be customised.

04. Animate.css

Animate.css is a small library of CSS animations, which can be used to add subtle (or not so subtle in some cases) animations to elements in your page. All you need to do is include the Animate.css code and then use the classes provided to animate elements in your application.

05. three.js

three.js is a 3D animation library built for the web. three.js works by creating a three-dimensional scene in which objects are rendered, a camera is then placed inside this scene. Some of the best animated websites on the web utilise three.js.

06. Spirit

Spirit shows results in real-time

Spirit is a web animation timeline GUI currently in beta. The interface is intuitive and simple to use enabling you to make changes or additions and see the results in the browser in real time. Spirit could be a real game changer for web animation!

07. GSAP

GSAP is a powerhouse when it comes to web animation. Starting life as a Flash animation plugin, it has since evolved to be one of the best web animation libraries available, enabling complex animations and time-based functions to be easily authored.

Learn more about the power of CSS animation

Generate London 2018. Be there

We all know about the power of CSS transitions, we use them day in and  day out to animate the state of a button or link; but CSS is capable of  so much more when it comes to animation, especially when paired with SVG, and it’s about time we started utilising it.

Get your ticket for Generate London 2018 and hear Steven Roberts reveal the best tools for recreating some of the  best animations the web has to offer.

Related articles: