Motion, as explained before, is where animation and graphic design meet. Motion, interaction, and animation can definitely be interchangeable in some places.
In Malty, motion tells stories about our products. It defines navigation and creates a more natural experience by adding a level of depth to the interaction. That's why we set a couple of motion types used in Malty.
Easing
Easing mimics the way real-world objects accelerate and slow down over time. The easing motion type can be applied to all user interface elements exhibiting motion.
Zoom
Zoom allows our users to “travel” through user interface elements spatially or increase their scale to reveal greater levels of detail.
With Zoom, the user’s point of view and the user interface element remains fixed, but the element increases (or decreases) in size within the user’s screen. Now imagine that the person stays put and uses the camera’s zoom feature to make the flower appear larger.
Offset & Delay
When several user interface elements move at the same time and speed, users tend to group them and overlook the possibility that each element may have its functionality.
Offset and delay create a hierarchy between user interface elements that are moving at the same time and communicate that they are related, yet distinct. Instead of complete synchronization, the timing, speed, and spacing of elements are staggered, resulting in a subtle “one after another” effect.
Transformation
Transformation occurs when one user interface element turns into another. For example, a download button transforms into a progress bar, which transforms into a completion icon.
From a user experience perspective, transformation is an effective way to show users their status regarding a goal.
Overlay
In 2D space, there is no depth, and user interface elements may only move along the X or Y-axis. Overlay creates the illusion of foreground/background distinction in the 2D space of user interfaces. By simulating depth, overlay allows elements to be hidden and revealed according to user needs.
Obscuration
Picture a frosted glass door. It requires interaction to open, but it’s possible to discern (to some extent) what awaits on the other side.
Obscuration works the same way. It presents users with an interface that calls for interaction while simultaneously revealing a hint of the screen to follow. Navigation menus, passcode screens, and modals are common examples.