Summary  
This chapter covers easing functions in animation, explaining how to control motion dynamics over time using built-in presets, spring physics, and custom bezier curves.

General domain of usage  
User interface animations

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.

Ly8gQm94IDE6IEJ1aWx0LWluIGVhc2VJbk91dFF1YWQKYW5pbWUoewogIHRhcmdldHM6ICIjYm94MSIsCiAgdHJhbnNsYXRlWDogMzAwLAogIGR1cmF0aW9uOiAxMjAwLAogIGVhc2luZzogImVhc2VJbk91dFF1YWQiCn0pOwoKLy8gQm94IDI6IFNwcmluZyBwaHlzaWNzCmFuaW1lKHsKICB0YXJnZXRzOiAiI2JveDIiLAogIHRyYW5zbGF0ZVg6IDMwMCwKICBkdXJhdGlvbjogMTIwMCwKICBlYXNpbmc6ICJzcHJpbmcoMSwgODAsIDEwLCAwKSIKfSk7CgovLyBCb3ggMzogQ3VzdG9tIGJlemllciBjdXJ2ZQphbmltZSh7CiAgdGFyZ2V0czogIiNib3gzIiwKICB0cmFuc2xhdGVYOiAzMDAsCiAgZHVyYXRpb246IDEyMDAsCiAgZWFzaW5nOiAiY3ViaWNCZXppZXIoMC42OCwgLTAuNTUsIDAuMjcsIDEuNTUpIgp9KTs=

PHN0eWxlPgogIGJvZHkgewogICAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7CiAgICBwYWRkaW5nOiA0MHB4OwogIH0KCiAgLnJvdyB7CiAgICBtYXJnaW4tYm90dG9tOiAzMHB4OwogIH0KCiAgLmxhYmVsIHsKICAgIG1hcmdpbi1ib3R0b206IDhweDsKICAgIGZvbnQtd2VpZ2h0OiA2MDA7CiAgfQoKICAudHJhY2sgewogICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgd2lkdGg6IDM2MHB4OwogICAgaGVpZ2h0OiA0MHB4OwogICAgYm9yZGVyLXJhZGl1czogMjBweDsKICAgIGJhY2tncm91bmQ6ICNmMWYxZjE7CiAgICBvdmVyZmxvdzogaGlkZGVuOwogIH0KCiAgLmJveCB7CiAgICB3aWR0aDogNDBweDsKICAgIGhlaWdodDogNDBweDsKICAgIGJvcmRlci1yYWRpdXM6IDIwcHg7CiAgICBiYWNrZ3JvdW5kOiAjMmQ2Y2RmOwogICAgY29sb3I6ICNmZmY7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgZm9udC1zaXplOiAxMnB4OwogIH0KPC9zdHlsZT4KCjxkaXYgY2xhc3M9InJvdyI+CiAgPGRpdiBjbGFzcz0ibGFiZWwiPkJveCAxIC0gYnVpbHQtaW4gPGNvZGU+ZWFzZUluT3V0UXVhZDwvY29kZT48L2Rpdj4KICA8ZGl2IGNsYXNzPSJ0cmFjayI+CiAgICA8ZGl2IGNsYXNzPSJib3giIGlkPSJib3gxIj4xPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0icm93Ij4KICA8ZGl2IGNsYXNzPSJsYWJlbCI+Qm94IDIgLSBzcHJpbmcgcGh5c2ljczwvZGl2PgogIDxkaXYgY2xhc3M9InRyYWNrIj4KICAgIDxkaXYgY2xhc3M9ImJveCIgaWQ9ImJveDIiPjI8L2Rpdj4KICA8L2Rpdj4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJyb3ciPgogIDxkaXYgY2xhc3M9ImxhYmVsIj5Cb3ggMyAtIGN1c3RvbSBjdWJpY0JlemllcjwvZGl2PgogIDxkaXYgY2xhc3M9InRyYWNrIj4KICAgIDxkaXYgY2xhc3M9ImJveCIgaWQ9ImJveDMiPjM8L2Rpdj4KICA8L2Rpdj4KPC9kaXY+Cgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvYW5pbWVqcy8zLjIuMS9hbmltZS5taW4uanMiPjwvc2NyaXB0Pgo8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4=

Which of the following is NOT a type of easing available in Anime.js?

Animate web elements with modern motion techniques using Anime.js and JavaScript. Work with keyframes, timelines, stagger effects, easing, SVG animation, and text-based motion. Apply your skills through fun mini projects that deliver interactive and visually engaging results.

Learn how Anime.js structures animations using keyframes, timelines, and property-based motion. Build your first animated elements and explore the tools required to create smooth, modern effects. Establish a strong foundation before moving into more advanced motion techniques.

Enhance your animations with staggered sequences, custom easing, and motion helpers. Compare easing styles and experiment with randomness and dashoffset effects to create natural, expressive movement. Strengthen your ability to craft visually engaging animations with personality.

Apply Anime.js to SVG paths, individual letters, and interface elements to create expressive visual effects. Combine your skills in practical mini projects such as hero animations, content reveals, and loaders. Build polished results that demonstrate real-world animation techniques.

Why Easing Matters

Why Easing Matters