Kinetics & Interaction
How Interaction Influences Kinetics
Interactive motion design is deeply rooted in traditional motion graphics for TV and movies. But when motion that's functional, structual, and expressive is used purposefully within digital products, other considerations for motion design are introduced.
Reactive vs proactive motion
Reactive motion is triggered by user interaction. Proactive motion is triggered by system events. While both kinds of motion will have a Kinetics Personality, they need to be handled a little differently to create the most effective interaction.
Reactive motion tips:
- Use ease-out acceleration. This makes the interaction feel faster. The click or tap that triggers the motion is forceful enough to act as the ease-in. Explicitly showing the ease-in could make the transition seem slower.
- Don’t emphasize the movement: avoid ease-over, ease-under. Keep it sensible, unsurprising. Intuitively follow the interaction.
Proactive motion tips:
- Don’t overwhelm by using too many of these. Save them for opportune times when you won’t disrupt flow. Try not to show in the middle of a task, and avoid showing too many at a time.
- Mind the lifespan of elements that will automatically disappear. There should be enough time to read and understand messages.
- Consider emphasis. Since this is system-triggered motion, users are less likely to see it right away. Consider using ease-in-out acceleration to make it more noticeable.
Proactive motion as seen in Toasts
Proactive motion in Notification alert on the global navigation
Instant vs Continuous Motion
Most of the motion we think of is triggered instantly: the user or system does something, and an animation follows. Continuous motion happens in response to a continuous user or system input: the scrolling of a page, the dragging of a finger, the tilt of a device, a stream of data, etc.
- Instant motion: easing is built into the transition.
- Continuous motion: easing comes from the interaction, like panning, scrolling, dragging, etc. Use linear interpolation (ease-none) for pan-controlled motion assets like Lottie.
- Snap states while swiping: you’ll need an instant motion when the user releases the pointer. Set duration based on the remaining distance.
See Motion & Mobile Devices for more on continuous interactions.
Some animations will play in rapid succession when it’s trigger is easy to set off repeatedly. This is especially common with keyboard-based interactions. Test for these scenarios to make sure the effect is not only desirable, but unlikely to harm users with vestibular issues. (Learn more about Accessible Kinetics
Speeding Up with Implied Direction
A key way that motion serves interaction is to make long tasks appear to go faster. You control this directly through speed and acceleration. But you can also use implied direction – pairing the beginning or end of a movement with a fade – to shorten a transition time.