search

raunofreiberg / ui-playbook

The documented collection of UI components 🤓
https://uiplaybook.dev
MIT License
1.37k stars 73 forks source link

Motion #21

Closed raunofreiberg closed 3 years ago

raunofreiberg commented 3 years ago

Motion

WIP

Linked to #20

Principles

Motion should:

  1. Be educative
  2. Be informative and provide feedback
  3. Draw attention and provide focus
  4. Be playful, have character
  5. Not be overwhelming or distracting

Types of motion

Tier A

Basic CSS animations & transitions

  1. Component hovers
  2. Checkbox check
  3. Spinner
  4. Toggle

Tier B

  1. Entry/exit animations such as Modal, Notification
    • CSS animations for mount animations
    • Mention techniques to animate already unmounted components

Tier C

Interactive animations

  1. Stacked notifications
  2. Dynamic height opening

Tier D

SVG animations

  1. Stroke/fill with CSS
raunofreiberg commented 3 years ago

Closed by #24