Creative Technology Monthly: Motion and Animation
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.
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
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
Other useful animation links
- Animation Tools with Sarah - 20 minutes of tech tooling talk every Tuesday at 2 with Chris Dhanaraj and Una Kravets.
- UI Animation Newsletter - A curated collection resources plus advice on how to make web animation work for you hitting your inbox each week…
- Designing Interface Animation - Meaningful Motion for User Experience, a book by Val Head
- Motion And Meaning: A podcast about motion design for digital designers with Val Head and Cennydd…
- Intergalactic Mission is a cool microsite/game for the Valerian movie.
- Balloon.earth is an exciting web experiment that combines real-time weather data and 3D map renderings. Created by Hinderling Volkart’ Lab. 🎈.🌍
- The team at Polygraph have created a gorgeous data-visualisation analysing lyrics of the Hamilton musical. 🎼
- This ‘Leapy grid’ Codepen from Daniel Mayovsky is awesome. Hint: hold down your mouse 🐭
- The ‘Christmas Presents Typer’ 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.
- Smashing Magazine published a comprehensive Front-End performance checklist for 2017. 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. Let’s start calling them Bots from now on 😉.
- Web fonts, boy, I don’t know 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 — 🌟 ES6 Overview in 350 Bullet Points
- Taking Pattern Libraries To The Next Level by Vitaly Friedmann
- Using feature queries in CSS by Jen Simmons
- 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 — a super useful package if you are running lots of npm run scripts
- 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.