When you watch a well-crafted animation, you might notice how objects smoothly accelerate, decelerate, or bounce in a way that feels natural. This is because of easing—a core concept in animation that shapes how motion unfolds over time. Without easing, every movement would look robotic and abrupt, starting and stopping at a constant speed. Easing brings a sense of realism and polish, making transitions more engaging and believable.

Anime.js offers a variety of easing options so you can tailor your animations to fit any mood or context. There are three main types:

• Built-in easings: These are predefined functions like "easeInOutQuad", "easeInSine", and many others. They are quick to use and cover most common animation needs;
• Spring physics: This type simulates physical spring motion, creating bouncy, lifelike effects that mimic how objects move in the real world;
• Custom bezier curves: If you want complete control, you can define your own motion curves using cubic bezier values, allowing for unique and expressive transitions.

Choosing the right easing can completely change how your animation feels. For example, a button that gently bounces into place feels playful, while a dialog that glides smoothly in and out feels calm and professional. Each type of easing in Anime.js gives you a distinct toolkit for shaping these experiences.

To see the difference, imagine a simple animation: a box moves from left to right across the screen. The way it travels—whether it glides, bounces, or follows a custom path—depends entirely on the easing you select.