primitiv.es/motion

Motion

Movement is how an interface says what just happened. The right curve makes a change feel caused; the wrong one makes it feel broken.

Five instruments for feeling a curve before you commit to it, with values ready for CSS, Framer Motion and SwiftUI.

  1. 01EaseEasing curves played beside linearcubic-bezier numbers mean nothing until you see them moveIn preparation
  2. 02SpringMass, stiffness and damping, feltSprings feel right in the app and wrong in your CSSIn preparation
  3. 03DurationHow long a movement should takeEverything is 300ms because that is the defaultIn preparation
  4. 04StaggerChoreography for listsItems appearing at once feel like a page load, not a revealIn preparation
  5. 05ExportCSS, Framer Motion and SwiftUI valuesThe same curve has to be written three waysIn preparation