Easing
Easing controls how an animated property changes over time. It determines whether a movement runs at constant speed, accelerates, slows down or combines those behaviours.
Easing changes the pace of an animation between its key states. Two objects can start together, travel the same distance and arrive together, yet feel different because their speed changes differently during the move.
It applies to more than position: scale, rotation and opacity can also change with easing. Adobe’s easing documentation describes using easing to adjust the rate of change within an animation.
The main easing patterns
- Linear: equal changes in equal time. Useful when a movement should maintain a steady rate.
- Ease-in: starts slowly and accelerates. It can help an element build speed as it leaves the frame.
- Ease-out: starts faster and slows toward the end. It can help a card or label arrive and settle where it needs to be read.
- Ease-in-out: starts slowly, speeds up, then slows again. Useful when both the beginning and the end of a move are visible.
These names describe broad patterns. Different curves can share the same name while feeling softer or more abrupt. The example uses simple curves to make the difference visible; it is not a comparison of software defaults.
How to choose easing for motion graphics
- Decide what the movement should communicate. Is the object entering, leaving, settling or continuing steadily?
- Set the positions and duration. Compare curves with those values held constant so you can judge the change in speed.
- Check the whole movement. A slow start can delay important information; a long tail can make a short transition feel sluggish.
- Review neighbouring elements. A selected card may settle while the surrounding cards make space. Their motions should feel coordinated, even if their curves differ.
In iArt, describe the behaviour rather than only asking for “smooth” animation: specify a quick entrance followed by a gentle stop, or a steady move without acceleration. Keep the requested duration explicit. For an applied example with coordinated cards, see how to create a 3D carousel animation.
Easing vs. keyframes, tweening and springs
Keyframes set important states, such as the starting and ending positions. Tweening produces the intermediate states; easing shapes progress through them. A spring models a response using properties such as stiffness and damping and may overshoot before settling. A bounce is not required for easing, and not every movement benefits from one.
Related: JavaScript animation, kinetic typography. For text-specific examples, see how to animate text.