Animation
Animation helps to bring both functionality and components to life. An action can be made clearer by having the elements react in an intuitive and seamless way, “action -> reaction”. Whether you press a button, pull a drawer or zoom in a map, the interaction should feel responsive and lively.
How to use animation?
It is important that the length of the animation and the attributes that are animated do not seem distracting or make it harder to navigate for the user. There is a big difference between the length of an animation when you change button state and when a full-screen drawer should open.
We have set up three basic animations that you can use when setting up transitions between states. These define three different curves on how the animation should be performed: Slow, Medium, Fast. If you want to define your own animations, it is important to think about how the whole user-flow is experienced, not just the element you are animating.
Slow
Slow should be used where you need slower animations and is well suited for large objects or where the element should move over a larger distance. This lasts for 0.5 seconds and has a larger easing towards the end.
Medium
Medium, as the name implies, is in the middle and should be used for medium-length transitions. This is probably best suited for elements that need to move or change width/height. This lasts for 0.3 seconds and has a short easing towards the end.
Fast
Fast is a very short animation and should be used where you need to complete the action quickly, or where there are not big differences between the steps. An example would be between two states on a button. This lasts for 0.1 second and has very short easing at the start and end.
Different types of animation
Animation is not only meant for changing states or large components. There are many forms of interaction that need animation or where movement can help the user find their way. Three big examples of using animation in app and web are: icons, illustrations and loading.
Icons
Icons can be used both statically or you can create animations to clarify the action that is performed. A good example of this is when downloading content. To save space, the download icon can show that it is performing the action and show that the action is finished without using any new elements.
Illustrations
Animated illustrations can give life and movement to static screens and flows. Vy’s illustration style is best suited for simple animations of entrances and transitions between elements. By using animations, you can more easily focus where you want the user’s attention. Examples can be when onboarding new users, or introducing a new service.
Loading
Clear indication of loading content or actions helps the user understand that the action is about to be performed. It can also create an illusion that the loading time is faster by having something always happening on the screen.
