Getting those saucy UI animations for mobile and web
Micro-interactions, transitions and all simple animations should do one job, which is to enhance the experience of the user engaging with your app. Animations that are good provide feedback to the user on taps and gestures giving them a sense of direct interaction.
Good animations are fast and fluid, which ideally means that their entire duration ranges from 250ms-900ms. These animations help visualise the impact of your input on the system through feedback and change in state of the system.
Bad animations tend to be slow and distracting from the flow of interaction. Most of the time they can be inconsistent with the rest of the experience and ultimately end up confusing the user. Which is absolutely NOT what any product aims to be known for.
The Basics
Animations in their essence are a state change from point A to point B. Animations have become a common standard so much so that they are found in every modern digital platform whether it is a POS(point of sale) at your local cafe, on the web or on your mobile phone.
Translate
Translate is the moving of the X and Y position of an element relative to time. We can set the duration time and specify the new X and Y position coordinates to see the position change. The core of this technique can be found in sliding, bouncing and shaking animations.
Rotate
Changing the angle property of the element as a function of time lets you animate the element in a rotational way. When you also change the X, Y position properties you can get an effect where the element rolls from point A to point B.
Scale
This kind of animation is used extensively in iOS, you will see it when you tap an app icon to launch an app, when you minimise an app and several other instances. This technique allows for the contextualisation of linked interfaces. You can give the user a visual reference of the UI context they are in.
Beware The Curves
You may have heard the terms Linear, EaseIn, EaseOut, EaseInOut and Spring. These are terms used to identify respective animation curves, which represent animations that closely replicate different real-world physics. These curves help to mimic life-like animations. Modern iOS apps usually use Spring and the Easing curves (EaseIn, EaseOut, EaseInOut) to replicate life-like animations that you see in things like transition animations and micro-interactions.
Playing With Properties
You can also change properties such as opacity and colour to communicate a change in the state through animation. Changing the opacity of an element as a function of time can result in FadeIn and FadeOut effects. These effects are used to give a nicer transition than if an element were to immediately appear and disappear from the interface. Changing the colour property gives us animations like the ones seen in the Apple Watch.
Techniques Assemble!
You will usually find yourself using a combination of several different transform techniques. This will give you an interesting animation that displays almost life-like physics such as Bounce, Morph, Shake etc.
Faster Than a Second
The longer an animation is the longer the user has to wait to interact with the interface again. This can lead to frustration for the user and you generally want to avoid that as much as possible. The ideal duration for UI animations is 250ms to 900ms. Regardless of how many different properties you are transforming, try to make sure it all fits into a duration less than one second, on the other hand, anything less than 250ms will make it seem like no animation occurred at all.
Speak Developer
Learning about curves and how each technique works can help you understand how developers implement animations. They essentially break down the animations a designer creates and builds it from the ground up in code. While it may be difficult to recreate certain complex animations one to one, but the more you know about the technicalities of animation the more you will be able to help developers work with you to achieve the beautiful animation(s) that you create.
Animation Tools
The animation tools available in the market cater to all skill levels. You will be able to find a tool that gives you immense flexibility but may have a generously steep learning curve as well as a tool that may not let you create very sophisticated animations but may be welcoming to beginners.
Principle
There are two canvases when you start up Principle, one represents the state of elements in position A and the other represents the position B. After you have set positions A and B of an element the tool will automatically animate the elements that are shared by the two canvases. The user interface is similar to Sketch which helps with familiarity when starting out.
Flinto
While similar to Principle in its approach to state animation, you can also import your artboards directly from Sketch into Flinto. Any time you change your design in Sketch you can simply import the artboards in Flinto again and the artboards in Flinto will be updated.
Origami
A tool modeled after Apple’s very own Quartz Composer, created by Facebook gives an animator flexible tools to create some very sophisticated animations.
Framer
If you are a Javascript developer or are simply comfortable with the language Framer is the tool for you. Based on web technologies it allows you to preview your animation code in real time and also see these animations on an actual device.
For more on design and development find me on Twitter at @iamrahza
