No motion blur. Yes, we’re all about getting going quick and easy, but we still have clarity.
We aren’t a cartoon. Although we use a bounce effect, don’t use this too much in one animation or too extremely. It’s about being subtle, not loud and overt.
Squash and stretch
Motion blur
Create momentum. Make sure everything has an ease on it. Things move with force, it feels like there is something that has activated the movement.
Create dimension. Gradients, drop shadows and speed tails help create depth in space, giving our animations that physical, in-real-life vibe.
Basic rules
Overshoot for effect
Use a bounce to add emphasis with objects and text.
When things transition on they start at a high speed, accelerate, and then they hit a point they bounce off. Think of a ball bouncing on the ground. We tend to go for one to two bounces with time and force decay, as this feels natural but not too intense.
Use this effect selectively. It’s not for every element that you animate. For transitional or informative things like graphs when there are a lot of bits and bobs that appear, using the bounce will be too much and take away from the information.
(A) Outgoing velocity 0% (B) Incoming and Outgoing velocity 100% (C) Incoming velocity 0%
Cubic-bezier(1,0,.5,1)
(A) Outgoing velocity 100% (B) Incoming velocity 50%
We use a steep easing curve to create momentum and the feeling of energy. We don’t animate in a linear way because that’s not how things move in real life, and we don’t use a gradual ease in/out because that’s default and not dynamic enough.
Whether you’re in After Effects or CSS use the numbers below to get the same effect. Easing should
be applied to changes in position as well as other properties like scale and rotation.
Ease in hard, ease out soft
Principles like timing, staging, follow-through and overlapping action help guide the eye and bring life to our animations. After all, we are just animating dots.
Most of all, follow the laws of physics and the principles of inertia. When things move they build up to the movement and when they stop, they either slow down a bit or hit a point and bounce.
Use animation principles
We’re making things real for real people. So we move things as if
they are in physical world—with acceleration and momentum.
All together in harmony. When dots come together, the point in the middle should grow with every additional dot. This behaviour is only for loan consolidation.
06 Consolidate
05 Explore
Flying about. There can be more than one dot moving. These accelerate along random, curved paths—never in a straight line.
The dot ripples out with concentric circles. Always use this to expand out, never to contract.
04 Grow
Circular motion always goes clockwise. Our dot travels on a closed loop, slowing down as it reaches the apex, and gaining speed as it goes down again.
03 Progress
Taking a first step in the right direction. Our dot expands from left to right. We use this for our buttons.
02 Action
Rise up. Overshoot the ground and have the dot fall back to earth with
a few bounces. Never drop things in from the top.
01 Start
We have six motion behaviours that make up our animation language. Employ one or a combination
of these whenever you animate.
Our core behaviours