Motion
We use transitions to add a sense of playfulness and delight to our interface. Transitions also hint at functionality and inform the user's mental model of how an interface functions.
Easing
| Value | SCSS Variables | Description |
|---|---|---|
| cubic-bezier(.4, 0, .7, .2) | $gel-motion-ease-in | Start the animation slowly, and finish at full speed. |
| cubic-bezier(0, 0, .2, 1) | $gel-motion-ease-out | Start the animation at full speed, then finish slowly. |
Demo
Hover the blocks to view the motion
Ease In
Ease Out
Duration
| Value | SCSS Variables | Usage |
|---|---|---|
| .6s | $gel-duration-slow | Large UI objects. navigation slide in |
| .3s | $gel-duration-medium | Medium UI objects. Toast |
| .15s | $gel-duration-fast | Small UI objects. button, link and form input hover effects. |
Demo
Hover the blocks to view the motion
Fast
Medium
Slow