Easing vs. Spring
Easing follows a set timing curve. A spring moves like a real spring and stops on its own.
Use easing for fades, color changes, and timed steps. Use a spring for objects that move or follow a drag.
See what each pattern does
Try each example. Then read about the job it is made to do.
Easing
Easing is the timing curve that sets how an animation speeds up and slows down.
cubic-bezier()A panel enters quickly and comes to a soft stop. Its exit is shorter and more direct.
- Use it when
- Use easing when speed should show weight, direction, or purpose.
- Do not use it when
- Never use the same large bounce for every interaction.
- Name used in code
cubic-bezier()
Spring Animation
Spring animation follows a physics model. Stiffness, damping, mass, and starting speed control how it moves.
stiffness / damping / massA dragged card moves a little past its slot, then settles back into place.
- Use it when
- Use it for gesture-led motion that can be stopped and should keep the user’s speed.
- Do not use it when
- Never add too much bounce to common controls or sensitive tasks.
- Name used in code
stiffness / damping / mass
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Easing | Use easing when speed should show weight, direction, or purpose. | Never use the same large bounce for every interaction. | cubic-bezier() |
| Spring Animation | Use it for gesture-led motion that can be stopped and should keep the user’s speed. | Never add too much bounce to common controls or sensitive tasks. | stiffness / damping / mass |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Easing, Spring Animation for our real user flow. Use this rule: Easing follows a set timing curve. A spring moves like a real spring and stops on its own. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.