Motion (BETA)
Principles
Always be magical.
The standard transition is 125ms ease-in-out for everything in a component, color change, etc.
Native mobile is a little slower with ~175ms transitions and ease-in-out.
On dialog summons they ease-out ( slow down ) when they come in and ease-in ( speed up ) when dismissed
Stuff that animates
- Everything
- All hover/press states
- Popovers
- Menus
- Drag n Drop
- Sorting
- Panels
- Reordering
- Tray/drawer
- Page transitions
- Panel switch
- Tree/Accordian
- Dialog
Popovers, and floaty stuff
Popovers, flyovers, menus, floating objects
Motion always starts from the object origin and moves out, either left, right, up or down.
4px slide and fade in 0% -> 100%
125ms ease-in-out
Click
Draggable List
Drag to sort the list, same 125ms ease-in-out transition, with elasticness/resistance when you try to drag it outside of the list.
reorder/reflow grid
demo of what happens when you either reorder a grid or resize it's container
same animation as everything 125ms ease-in-out, ideally add elastic when draggin the object outside of it's container
Drag & drop
Pretty standard, when you hover the drop zone you get a blue overlay with a 2px stroke and a message about what's going to happen
dropzone
Drag images up to drop zone
Drag & drop in a panel
What is it you ask? Try out the demo below, magical.
Libraries
Drop files here to add to your library
Drag images up to drop zone
Panels & tabs
How do they work?
Properties
Type
History
Layers
Panels open/close
appear disappear
Simple slide and fade in/out
Page transition
transition
Cupcakes
Cupcake ipsum dolor sit. Amet I love candy chupa chups cookie. Pie jelly beans cheesecake cupcake. Liquorice I love jelly muffin caramels.
Dessert caramels I love jelly-o jelly beans. Sesame snaps chocolate cake apple pie ice cream marzipan powder. I love cookie gummi bears sugar plum tootsie roll. Halvah marzipan macaroon.
Accordian
Expand, contrast. Can either open / close independantly or only one open at a time.
Trees
So many branches
Mobile tray/drawer/whatever
slidey slidey
Desktop tabs
Simple slide and scale up or down to fit the width of the text. 125ms ease-in-out;
Mobile tabs
Since mobile tabs are always the same width as each other, they have a 30% scale up and down effect when they slide, to make them a little bit more dynamic
below are a few timing options to maybe slow mobile animations down a tad or not
125
150
175*
200
225
250
Dialogs
There's 2 main types of dialogs ( card and card-less ), both use the same fade and slide animation
Modal Title
Modal Title
Switches
Switches (checkbox, radio, and also the slider) share the same hover and pressed/selected state. getting darker and filling in when pressed/selected.
Selection
Click to use, hit the 'check' to go into selection mode, or press and hold to enter selection mode. can sort and reorder when not in selection mode, else you get the marquee tool.