Creative Technology Monthly: Motion and Animation

Issue 02: Motion and Animation - December 2016

First published: . Updated:

Motion and Animation 🚀

Motion and animation on the web is becoming more and more prolific. Animation is being used to create visual enhancements, like indicating state, to full-blown immersive experiences and browsers are finally capable of doing the amazing things that we’ve been dreaming of for years. There are hundreds of different ways to animate elements (CSS transitions, @keyframe animation, SVG, Canvas, WebGL, and probably a few more).

Animation on the web means different things to different people. To me, it is all about enhancing the user experience, sometimes for decoration but rarely. A great, and oft-used, example of UX-improving animation can be seen on Stripe’s payment form. As you can see below, there are three different examples of animation used in their tiny payment form. What I find particularly interesting is how errors are taken care of in more of a light-hearted manner rather than a splash of red text to indicate an invalid state.

If you want to discuss animation and learn from a great community, I highly recommend the Animation at work Slack community run by Rachel Nabors (@rachelnabors) who also runs Web Animation Weekly.

Insight: Brad Bird on Animation from Kees van Dijkhuizen Jr. on Vimeo.

Web animation libraries and tools

There are many libraries to help you do so this animation, it is hard to know where to start, so I have given a shortlist below.

GSAP — Greensock Animation Platform

This library has been the big daddy for animation on the web for years. From its roots in Flash & now HTML5/Javascript — if you’re serious about animating for the web, GSAP is what you need. There are too many features to mention, but suffice it to say, it is the most robust, compatible and capable library around.

Animate.css — Just-add-water CSS animations

Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. The project is developed by Daniel Eden and is open-source; and there is also a Sass port too. 👍

Mo.js — motion graphics toolbelt for the web

Mo.js is a JavaScript library devoted to motion for the web developed by Oleg Solomoka (@legomushroom). It offers a declarative syntax motion and the creation of elements for animation. Browser support is great, there’s a wealth of demos and tutorials to help you get started. You can even create custom builds of the library so you can reduce file size overheads in your project 👍. If you need a bit more of a deep-dive into mo.js, Sarah Drasner published an intro to the library on CSS-Tricks recently.

Anime.js — JavaScript animation engine

Anime is a flexible, yet lightweight JavaScript animation library developed by Julian Garnier (@juliangarnier). It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. The project is open-source, is actively developed and there are many examples in the project’s readme and on Codepen.

Other useful animation links


Reading / Link list

Advent calendars

24 Ways, the Web Performance Calendar, UXMas and the Advent of Code are all back for another year. If you have some spare time over the Holiday period, I urge you to give them a try.


  • is a beautifully made free visual guide to CSS with illustrated and animated examples of the most popular CSS properties. Made by Jeremy Thomas.
  • The Responsive Breakpoints Generator helps you easily generate the optimal responsive image dimensions 🖼
  • ntl — a super useful package if you are running lots of npm run scripts
  • Shave — Shave is a zero dependency JavaScript plugin that truncates text to fit within a HTML element based on a set max-height ✁


  • Rocket — Slack-style emoji everywhere on your Mac
  • Hyper — A cross-platform Terminal emulator by zeit. Version 1.0.0 was released recently which added Windows support!
  • Drop is a great little Colour Picker for Mac.
  • Kap (for Mac) is an open-source screen recorder built with web technology. It was used to create the gif above!
  • Product Hunt recently announced their The Best Technology Products of 2016.
©2020 / GitHub / Notes / Twitter / npm / / RSS