easingEasing
Compare common easing curves and custom cubic-bezier velocity profiles.
- Playground
- React + Motion
- Tunable props
- Reduced motion
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-easing.json- Purpose
- Compare velocity curves to choose an appropriate rhythm for responses, on-screen travel, and continuous motion.
- Trigger
- Trigger from curve selection or replay with equal travel and duration across options.
- Interruptibility
- Carry current velocity into target changes and test interrupted CSS transitions through real interaction.
- Reduced motion
- Keep very short state transitions and remove pronounced acceleration, deceleration, and long travel.
easingEasingAn easing function maps linear timeline progress to a changing rate of property interpolation.
ease-outEase-outProgress advances quickly after activation and decelerates near completion, giving responsive UI motion a controlled arrival.
ease-inEase-inProgress accelerates from a gentle start toward a faster finish, fitting departures that should gather speed.
ease-in-outEase-in-outProgress accelerates through the middle and decelerates at both ends, supporting visible point-to-point travel.
linearLinearTimeline progress and property progress remain proportional, producing a constant rate suitable for continuous indicators.
cubic-bezierCubic-bezierFour control points describe a cubic Bézier timing curve for custom acceleration and deceleration.
asymmetric-easingAsymmetric easingDifferent acceleration and deceleration shapes give the entrance and arrival distinct timing characteristics.