Motion shows how the Flowit Supply brand moves. This section covers the principles, the curve, where motion appears, and when to animate. Clear, practical motion helps designers see the brand as the precise, plain marketplace it is.
Three ideas guide every motion choice. Each follows the brand's voice: clear, practical and precise.
Use one motion curve for anything that moves, in place of your tools' defaults. Set it once so every animation matches.
Apply the curve to menus, buttons, panels and page changes. Keep it the same across all of them.
A few rules that keep motion clear and practical.
Move things to show where they came from or where they went.
Animate just to decorate.
Use one quick timing for small changes and a slower one for large ones.
Make designers wait for an animation to finish before they can act.
Respect the reduced motion setting by fading instead of moving.
Spin, flash or shake large areas of the screen.