The right way to use animations: steps and best practices
Do your research
Check out your competitors — are there animations on their websites or mobile applications? If not, do some research on what works best for websites outside of your field, and if the same type of animation could work for you.
Another important type of research is user research. Talk to your users — find out what they want from your website or mobile application and how you can improve it to give them what they want. Here are some questions you can ask your users:
- When you think of my brand, what do you think of?
- How would you describe my brand?
- Navigate through my website/mobile application. What was easy, and what was difficult?
After researching and ruminating upon your brand’s personality, it’s time to create guidelines for animation. Instead of using “standard” animations, you can customize them to reflect your brand. For example, some brands are playful, and their animations are bouncy to reflect that.
Your guidelines should state whether your brand’s animations should be simplistic and smooth or flourishing and grand. You can tailor small animations slightly to reflect this in implementation.
It is important to emphasize here that you should be pragmatic — just because something looks good or you like something doesn’t mean it will make navigating your website or mobile application easier for the user.
For example, in your guidelines, you can mention that specific animations can or cannot be combined with other animations. For example, if rotating an element is too flashy, say that it cannot be combined with moving — an object or button on your website cannot move and rotate.
However, things like scaling — moving elements to be a greater or lesser size — can be combined with other elements. Combining scaling and movement is doable because it can occur in a smooth motion and can mimic real life interactions and movement. Opacity is another animation type that can be combined with other animations to give the user a more dynamic experience.
You’ll also want to be mindful of the size of each screen that your user is using. For example, if the element is large and it covers a greater distance, the duration of the animation would be slightly longer than if the element was small and covered a short distance.
The duration of your animations can also depend on how simple or complex each animation is — a simple motion such as colour changes has shorter duration than a complex motion like page transitions. Usually, the optimal speed for animation is between 200 and 500 ms, because animations shorter than 100 ms will not be noticed and animations longer than 1 second would seem like a delay.
In your guidelines, be sure to state which animations can be combined with other animations, and consider the duration of each animation depending on screen size as well.
Check out material.io for more details about understanding motion in animation.
Test it out
Now, you can create some animations and test them out. There are three main easing curves in animating websites and mobile applications that cover your essential needs. These curves ensure that your animations are more like real-world motion rather than mechanical robot-like movements.
The first curve is the ease-in curve, which accelerates as it begins movement. Imagine it like a car that starts up then accelerates out of the driveway. You can adjust the speed of the acceleration to match the guidelines you’ve outlined. For example, if you wanted your animations to reflect your brand’s minimalistic, straightforward style, then creating an ease-in curve that gets straight to the point is better than making one that starts out a lot slower and accelerates very quickly at the end.
The second curve is the ease-out curve, which is the opposite of the ease-in curve. This one is like a car pulling into the driveway — it starts out fast then decelerates to a stop. This animation helps bring elements into view.
The last curve is the ease-in-out curve. This one combines features of both the ease-in and the ease-out curve, and it moves elements from one area to another, similar to a car going from one stop to the next. You can see this animation in use when you click a button and it expands into a screen.
By testing these core animations, you can form an easing hierarchy. Similar to a type hierarchy, the animation that attracts the most attention would be at the top of the hierarchy. These types of animations would ensure that a certain element stands out more, emphasizing a point of