Main prototype
Video of the primary prototype used to define all subsequent motion bits. This is the base for everything that follows.
Designing Chrome Android part 2 of 2, motion appendix.
A gathering of motion videos and prototypes to better inform the "Redesigning Chrome Android" article.
Article and site by @kounterb, work shown by @mano1creative.
Video of the primary prototype used to define all subsequent motion bits. This is the base for everything that follows.
The following specs will use these commong values. Please not that they will be excerpt only, not full, for obvious readibility and relevance reasons. This page would be a long list of un-readable values otherwise. The goal is only to give you a preview of the process.
[SPEC EXCERPT] - EXPAND ANIMATION
Video not working? Watch it on Youtube
Omnibox
• Scale / Size: original > fill the entire toolbar
• Duration: DURATION1
• Curve: TRANSFORM_CURVE
• Note: transform origin 10% from the left
URL ICON (E.G. GREEN LOCK)
• X Position: -10dp offset
• Opacity: 1 > 0
• Duration: DURATION2
• Curve: TRANSFORM_CURVE
TAB SWITCHER + SETTINGS ICONS
• X Position: +10dp offset
• Duration: DURATION1
• Curve: FADE_OUT_CURVE
• Opacity: 1 > 0;
• Duration: DURATION2
• Curve: FADE_OUT_CURVE
• ERASE ICON
[...]
[SPEC EXCERPT] - OPEN
Video not working? Watch it on Youtube
DROP DOWN MENU
• Position: slide down from under toolbar, to open
• Duration: DURATION2
• Curve: TRANSFORM_CURVE
LIST ITEMS
• Position: -20dp vertical offset > 0 / neutral position
• Duration: DURATION5
• Curve: FADE_IN_CURVE
• Delay: DURATION4
MISC
• More info: Radial action on MD spec.
[...]
[SPEC EXCERPT] - ON - ACTIVE TAB
Video not working? Watch it on Youtube
TOOLBAR
• Shadow opacity, border opacity: 1 > 0
• Duration: DURATION0(instant)
TAB FRAME
• Scale: 1 > 0.9 - may need to tweak in implementation
• Vertical position: 0 > n (same behavior as today)
• Transform origin: top center
• Delay: DURATION5
• Curve: TRANSFORM_CURVE
CONTENT AREA
• Scale: 1 > 0.98 - may need to tweak in implementation
• Transform origin: top center
• Delay: DURATION3
• Curve: TRANSFORM_CURVE
• Note: The idea is to scale down the content enough to create an 8dp margin
TITLE
• Opacity: 0 > 1
• Delay: DURATION3
• Curve: FADE_IN_CURVE
OMIBOX FIELD
• Opacity: 1 > 0
• Delay: DURATION2
• Curve: FADE_OUT_CURVE
[...]
[SPEC EXCERPT]
Video not working? Watch it on Youtube
PAPER / CARD
• Position (x, y): tap location > (0dp, 0dp)
• Scale: 0 > 1 (screen size)
• Duration: DURATION1
• Curve: TRANSFORM_CURVE2
• Delay: DURATION2
ITEMS
• Position: -10dp vertical offset > item position
• Opacity: 0 > 1 (screen size)
• Delay: DURATION5
• Curve: FADE_IN_CURVE
• Delay between items: DURATION0
• Delay before first item: DURATION0
[SPEC EXCERPT]
Video not working? Watch it on Youtube
PAPER / CARD
• Scale: 1 > 0.7
• Opacity: 1 > 0
• Duration: DURATION6
• Curve: FADE_OUT_CURVE
• Tansform origin: X icon
[SPEC EXCERPT]- OPEN
Modeled after the Material design menus.
Video not working? Watch it on Youtube
PAPER / CARD
• Scale: 0.03 > 1, Position: menu icon > top / right edge (flush)
• Duration: DURATION6
• Curve: FADE_OUT_CURVE
• Tansform origin: Menu icon
• Opacity: 1 > 0
• Duration: DURATION2
• Delay: DURATION2
• Curve: Linear
MENU ITEMS (TEXT ROWS)
• Opacity: 0 > 1
• Duration: DURATION5
• Curve: FADE_OUT_CURVE
• Delay: DURATION2
• Delay for subsequent item: DURATION8
[...]
[SPEC EXCERPT]- OPEN
Video not working? Watch it on Youtube
PAPER / CARD
• Scale: 0 > 1
• Position: icon > centered on screen
• Duration: DURATION3
• Curve: TRANSFORM_CURVE
• Transform Origin: top left
• Scale: 0 > 1
• Duration: DURATION6
• Curve: FADE_IN_CURVE
CONTENT
• Position: y: -32dp > 0dp (slide down)
• Duration: DURATION3
• Curve: FADE_IN_CURVE
• Delay: DURATION2
• Opacity: 0 > 1
• Duration: DURATION5
• Delay: DURATION1
• Curve: FADE_IN_CURVE
[...]
[SPEC EXCERPT]
Video not working? Watch it on Youtube
INITIAL FADE
• Scale: 0 > 1
• Duration: DURATION3
• Curve: FADE_IN_CURVE
• Delay: DURATION2
SLIDE CONTENT AWAY TO THE LEFT
• Opacity: 1 > 0
• X position: 0 > -40 dp
• Duration: DURATION1
• Curve: FADE_IN_CURVE
SLIDE NEW CONTENT FROM THE RIGHT
• Opacity: 0 > 1
• X position: 40 dp > 0 dp
• Duration: DURATION1
• Curve: FADE_IN_CURVE
• Delay: DURATION2
• Fading Order: Hero (avatar), add. avatars, text
CHECKMARK
• Opacity: 0 > 1
• X position: 40 dp > 0 dp
• Duration: DURATION1
• Curve: FADE_IN_CURVE
FADE OUT ADD. AVATARS
• Opacity: 0 > 1
• Duration: DURATION1
• Curve: FADE_OUT_CURVE