Anime.js Easing Functions — Complete Guide with Examples

In this tutorial, you'll learn about Anime.js easing functions. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Anime.js easing functions define how an animation accelerates and decelerates over time, transforming linear motion into natural, polished movement that feels intuitive to users.

What You'll Learn

By the end of this tutorial, you'll use Anime's built-in easing functions, understand the easing categories (quad, cubic, elastic, bounce), apply custom cubic bezier curves, and create spring-like motion.

Why It Matters

Linear motion looks robotic and unnatural. Easing mimics real-world physics: a bouncing ball slows at the top, a drawer slides in with friction, a door swings on a hinge. The right easing makes your UI feel polished and professional.

Real-World Use

Doda Browser's tab switching animation uses easeOutQuad for a natural deceleration. The loading spinner uses linear easing for uniform rotation. The pull-to-refresh uses easeOutElastic for a satisfying bounce.

Where This Fits in Your Learning Path

flowchart LR
    A["Timeline & Controls"] --> B["**Easing Functions**"]
    B --> C["SVG & Morph"]
    C --> D["Scroll & Performance"]
    D --> E["Advanced Anime.js"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Easing Categories

Anime groups easings by acceleration pattern. Each category has In, Out, and InOut variants.

anime({ targets: '.box', translateX: 300, duration: 1000, easing: 'easeInQuad' })
anime({ targets: '.box', translateX: 300, duration: 1000, easing: 'easeOutQuad' })
anime({ targets: '.box', translateX: 300, duration: 1000, easing: 'easeInOutQuad' })

Expected output: easeIn starts slow and accelerates. easeOut starts fast and decelerates. easeInOut accelerates and decelerates at both ends.

Elastic Easing

easeOutElastic creates a bouncy overshoot effect that settles at the final value.

anime({
  targets: '.ball',
  translateY: -100,
  duration: 1500,
  easing: 'easeOutElastic'
})

Expected output: The ball jumps up past the target, bounces back and forth a few times, and settles at the final position.

Bounce Easing

easeOutBounce simulates a ball dropping and bouncing to a stop.

anime({
  targets: '.ball',
  translateY: 200,
  duration: 2000,
  easing: 'easeOutBounce'
})

Expected output: The ball drops quickly, hits the bottom, and bounces several times with decreasing height before settling.

Cubic Bezier Easing

Use custom cubic bezier curves for precise control over the acceleration curve.

anime({
  targets: '.box',
  translateX: 300,
  duration: 1500,
  easing: 'cubicBezier(0.25, 0.1, 0.25, 1.0)'
})

Expected output: The box moves with a custom acceleration curve defined by the four bezier control points.

Spring Easing

Spring easing creates natural spring physics without specifying duration. The tension and friction parameters control the behavior.

anime({
  targets: '.box',
  translateX: 300,
  easing: 'spring(200, 20, 40)'
})

Expected output: The box springs toward the target with tension 200, friction 20, and mass 40, creating a natural oscillating motion.

Stepped Easing

steppedEasing creates discrete jumps instead of smooth motion.

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  easing: 'steps(5)'
})

Expected output: The box jumps to 20%, 40%, 60%, 80%, and 100% in discrete steps rather than sliding smoothly.

Common Mistakes

1. Using the wrong easing name format

Easing names are camelCase: easeOutElastic, not ease-out-elastic. Check the exact spelling in Anime docs.

2. Forgetting that elastic easings extend beyond 0-1 range

Elastic and spring easings overshoot the target. If the target value hits a boundary, the element may visually exceed it.

3. Using easeOut for introductory animations

easeOut starts fast, which can be jarring for elements entering the screen. Use easeInOut for entries and exits.

4. Overusing elastic easings

Elastic effects draw attention. Use them sparingly for highlights, not for every animation on the page.

5. Not testing easing on mobile devices

Complex cubic bezier curves may feel different on 60Hz vs 120Hz screens. Test on target devices.

Practice Questions

1. What is the difference between easeIn and easeOut? easeIn starts slow and speeds up. easeOut starts fast and slows down.

2. Which easing mimics a bouncing ball? easeOutBounce creates the classic diminishing bounce effect.

3. What parameters does the spring easing accept? tension, friction, and mass as numbers: spring(200, 20, 40).

4. How do you create a custom easing curve? Use the cubicBezier function with four control point coordinates.

5. What does steps(5) do? It divides the animation into 5 discrete frames with no interpolation between them.

Challenge

Create four boxes moving the same distance with different easings: easeInQuad, easeOutQuad, easeInOutQuad, and easeOutElastic. Compare their motion patterns visually.

FAQ

Mini Project

Build an easing comparison playground. Four boxes start at the same position and animate to the same target with different easings. Label each box with its easing name.

const easings = ['easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeOutElastic']

easings.forEach((easing, i) => {
  anime({
    targets: '.box-' + i,
    translateX: 400,
    duration: 2000,
    easing: easing,
    delay: 300
  })
})

<div style="display:flex;flex-direction:column;gap:8px;font-family:monospace;font-size:12px">
  <div style="display:flex;align-items:center;gap:8px">
    <span style="width:120px">easeInQuad</span>
    <div class="box-0" style="width:30px;height:20px;background:#ff6b6b;border-radius:4px"></div>
  </div>
  <div style="display:flex;align-items:center;gap:8px">
    <span style="width:120px">easeOutQuad</span>
    <div class="box-1" style="width:30px;height:20px;background:#4ecdc4;border-radius:4px"></div>
  </div>
  <div style="display:flex;align-items:center;gap:8px">
    <span style="width:120px">easeInOutQuad</span>
    <div class="box-2" style="width:30px;height:20px;background:#ffe66d;border-radius:4px"></div>
  </div>
  <div style="display:flex;align-items:center;gap:8px">
    <span style="width:120px">easeOutElastic</span>
    <div class="box-3" style="width:30px;height:20px;background:#a29bfe;border-radius:4px"></div>
  </div>
</div>

What's Next

Continue with SVG and advanced animation:

Related topics: CSS cubic-bezier and easing, JavaScript math for animation curves.