Easings
Quickly find and grab your favorite easings for creating interactivity & animations.
Features
- Built-in Easings: Access to common cubic-bezier easings (ease-in, ease-out, ease-in-out)
- Custom Easings: Add your own cubic-bezier or spring animations
- Spring Animations: Create physics-based spring animations with customizable stiffness, damping, and mass
- Multiple Formats: Copy values in CSS, Figma, or Motion formats
- Search: Search through your custom easings
Normal Easings
Normal easings use cubic-bezier curves for smooth, predictable transitions. These are the standard timing functions used in CSS and design tools.
- Ease In: Starts slow and accelerates
- Ease Out: Starts fast and decelerates
- Ease In Out: Starts and ends slow, accelerates in the middle
- Custom: Define your own cubic-bezier curve for unique motion
Normal Easing Output Formats
- CSS:
cubic-bezier(x1, y1, x2, y2) - Figma:
x1, y1, x2, y2 - Motion:
cubicBezier(x1, y1, x2, y2)
Spring Animations
Spring animations use physics-based easing for natural, bouncy movements:
- Stiffness: Controls how fast the animation moves (higher = faster)
- Damping: Controls how bouncy the animation is (higher = less bouncy)
- Mass: Controls how heavy the animation feels (higher = slower)
Spring Animation Output Formats
- CSS: Uses physics simulation to generate proper
linear()function with multiple points - Figma:
mass: 1.2, stiffness: 550, damping: 30 - Motion:
mass: 1.2, stiffness: 550, damping: 30
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License
MIT
