Motion
The motion system extends the expression and functionality of the design system. Motion allows modules using the design system to be more flexible, more dynamic, and contain a wider range of content.
Mode
Add
The simplest expression of the motion system is the addition of a module into the composition. This allows a transition from one module of content (logo, typography, image or video) to another.
The same movement can be used in reverse to simplify and reduce content.
A new module scales up from zero. Existing modules scale down.
Example: Add
Mode
Amplify
When multiple modules coexist, focus can be shifted by amplifying modules one or several at a time.
As one module amplifies, the other modules in the composition scale down.
One module amplifies up and down.
Example: Amplify
Mode
Pan
Panning can introduce new modules that may exist out of the frame.
Panning the composition can be combined with other modes of animation, like Adding and Amplifying to create rich, dynamic compositions.
Many modules exist out of frame. Panning horizontally reveals the modules.
Example: Pan + Amplify + Add
Mode
Loop
When new modules are added and amplified at the same scale as the existing modules it creates a loop that iterates seamlessly.
Each module in the composition amplifies to the scale of its adjacent module. The last module reduces to zero.
Example: Amplify + Loop
Mode
Cut
Cuts can be introduced to compliment the smooth easing of the other modes. Cutting also provides another method for adding and removing content.
Cuts can be introduced while amplifying or after the modules have amplified. Cuts introduced during amplifying should occur halfway through the duration of the movement.
Cuts can also be used to change the background of the composition.
The module changes content without any additional animation. The cut is introduced at the halfway point of the Amplify animation.
Amplify + Loop + Cut
Hard cut on the color of the modules and composition background.