Creative Technology Monthly: Motion and Animation

Issue 02: Motion and Animation — December 2016

23 Dec 2016

article

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 (external site) — 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 (external site) — 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 (external site) — motion graphics toolbelt for the web

Mo.js is a JavaScript library devoted to motion for the web developed by Oleg Solomoka (external site) (@legomushroom). It offers a declarative syntax motion and the creation of elements for animation. Browser support is great, there’s a wealth of demos (external site) and tutorials (external site) 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 (external site) to the library on CSS-Tricks recently.

Anime.js (external site) — 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 (external site) and on Codepen (external site).

🔥 Showcase

Intergalactic Mission (external site) is a cool microsite/game for the Valerian movie.
Balloon.earth (external site) is an exciting web experiment that combines real-time weather data and 3D map renderings. Created by Hinderling Volkart’ Lab. 🎈.🌍 (external site)
The team at Polygraph have created a gorgeous data-visualisation (external site) analysing lyrics of the Hamilton musical. 🎼
This ‘Leapy grid’ Codepen (external site) from Daniel Mayovsky is awesome. Hint: hold down your mouse 🐭
The ‘Christmas Presents Typer’ (external site) on Codepen by Steve Gardner is brilliant.

📖 Reading / Link list

Cognitive biases affect everything we do, Alvin Hsia writes about them in The Irrational User (external site).
Smashing Magazine published a comprehensive Front-End performance checklist for 2017 (external site). It is extremely useful to see all the different techniques in one place and quite staggering the lengths we, as front-end devs, need to go to, to make a performant site.
Hot off the heels from Creative Tech Monthly’s issue 01 focus, Chatbots is this article by botnerds, Chatbots: a Misleading Term We Should Stop Using (external site). Let’s start calling them Bots from now on 😉.
Web fonts, boy, I don’t know (external site) by Monica Dinculescu — “Web fonts are okay”, but Monica proclaims it’s your “responsibility to make your site load super fast” when using them.
es6 (external site) — 🌟 ES6 Overview in 350 Bullet Points
Taking Pattern Libraries To The Next Level (external site) by Vitaly Friedmann
Using feature queries in CSS (external site) by Jen Simmons

🎄 Advent calendars

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

⚒ Code

cssreference.io (external site) 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 (external site) helps you easily generate the optimal responsive image dimensions 🖼
ntl (external site) is a super useful package if you are running lots of npm run scripts
Shave (external site) is a zero dependency javascript plugin that truncates text to fit within a html element based on a set max-height

🖥 Apps

Rocket (external site) — Slack-style emoji everywhere on your Mac
Hyper (external site) — A cross-platform Terminal emulator by zeit. Version 1.0.0 was released recently which added Windows support!
Drop (external site) is a great little Colour Picker for Mac.
Kap (external site) (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 (external site).

🌯 Tech Team Activity

🎉 The new TMW website (external site) has just been launched. I (Zander) and Lorena have been working on it for the past few months and we are extremely proud of it. Have a look and let us know what you think: tmwunlimited.com (external site).

🗣 I (Zander) gave a #brunchandlearn talk about now by zeit. If you haven’t heard about the service, now is a cloud-based hosting and deployment platform. They offer realtime deployments for Javascript-based apps, Docker containers and static sites and files. It is extremely easy to setup and every site is uses HTTPS & HTTP2 by default! If you’d like to learn what others think about zeit, Remy Sharp wrote an article about it a few days ago.

👋

If you have any comments or feedback, please let us know. If you have any suggestions for next month’s issue. Please send a tweet to @TMWInteractive (external site).