Creative Technology Monthly: Motion and Animation

Issue 02: Motion and Animation — December 2016

Posted:

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.

🔥 Showcase

📖 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.

⚒ Code

  • cssreference.io 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  is  a super useful package if you are running lots of npm run scripts
  • Shave is a zero dependency javascript plugin that truncates text to fit within a html element based on a set max-height

🖥 Apps

  • 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.

🌯 Tech Team Activity

🎉 The new TMW website 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.

🗣 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.