An animation only feels natural once its timing is right. Easing curves determine how a motion accelerates and slows down over time. This guide explains the most important curves and how to use them in React and CSS.
What easing means
Without easing an element moves linearly, at a constant speed. That feels mechanical. In the real world things accelerate and slow down. That is exactly what an easing curve reproduces.
Technically a cubic-bezier curve describes four values that control the path between start and end. It can be drawn as a curve inside a unit square.
In, Out and InOut
Ease-In starts slow and speeds up. Good for motions that leave the frame. Ease-Out starts fast and eases out softly. Ideal for elements that enter the frame, because the ending feels calm.
Ease-InOut is symmetric: slow at the start and end, fast in the middle. Suitable for motions that begin and end again, such as a panel that opens and closes.
Curves in framer-motion
In framer-motion you pass the curve as a tuple, for example ease: [0.22, 1, 0.36, 1] in the transition. This curve eases out especially softly and suits most fade-ins.
Keep durations short. Between 0.3 and 0.8 seconds most UI motions feel pleasant. Longer times quickly feel sluggish.
Curves in CSS
In CSS you use the same value as transition-timing-function, for example cubic-bezier(0.22, 1, 0.36, 1). This way CSS transitions and JavaScript animations behave consistently.
A curated collection of curves with preview and copy function is available in the library's resources.