GSAP Easing Explained — Complete Guide to Motion Paths & Natural Animation

    %%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
  A["Getting Started"] --> B["Timelines & Sequencing"]
  B --> C["ScrollTrigger"]
  C --> D["You Are Here: Easing & Motion Paths"]
  D --> E["Performance & Best Practices"]
  click A "/frontend/libraries/gsap/gsap-getting-started"
  click B "/frontend/libraries/gsap/gsap-timelines-sequencing"
  click C "/frontend/libraries/gsap/gsap-scrolltrigger"
  click D "/frontend/libraries/gsap/gsap-easing-motion"
  click E "/frontend/libraries/gsap/gsap-performance"
  

GSAP easing functions control how an animation accelerates and decelerates over time, transforming robotic linear motion into natural, organic movement that feels alive.

In this tutorial, you’ll learn every easing family GSAP offers — Power, Elastic, Bounce, Back, and more — plus how to animate elements along curved motion paths and create realistic follow-through effects used in production interfaces like Doda Browser and Durga Antivirus Pro.

What You’ll Learn

• Why easing matters for perceived animation quality
• How each ease family (Power, Elastic, Bounce, Back, Expo, Sine, Steps) behaves
• When to use in, out, and inOut variants
• How to combine multiple eases in a single animation
• How to animate elements along curved paths with MotionPathPlugin
• How to create organic follow-through and overlap effects
• Common easing mistakes and how to avoid them

Why Easing Matters

In the real world, nothing starts or stops instantly. A car accelerates from a stop, doesn’t it? It doesn’t jump to 60 mph immediately. The same principle applies to animation. Without easing, motion looks robotic and jarring.

Security note: Understanding Gsap Easing Motion helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

Think about the smooth tab-switching animation in Doda Browser — that subtle deceleration as the tab slides into place. Or the satisfying bounce when Durga Antivirus Pro completes a scan. These are achieved by choosing the right easing function.

Easing is the difference between “something moved” and “something moved well.” A well-eased animation guides attention, feels polished, and makes your UI feel professional.

Prerequisites

Understanding Ease Direction: In, Out, and InOut

Every GSAP ease comes in three variants. Think of them as personality traits:

Rule of thumb: Use out for elements entering the screen (they should decelerate into place). Use in for elements leaving. Use inOut for looping animations.

Power Eases (1–4) — Your Daily Drivers

Power eases are the workhorses. They’re subtle, natural, and you’ll use them 90% of the time. The number (1–4) controls the intensity of the ease.

gsap.to(".box", { x: 300, ease: "power1.out" });   // slight deceleration
gsap.to(".box", { x: 300, ease: "power2.out" });   // moderate — most UI animations
gsap.to(".box", { x: 300, ease: "power3.out" });   // strong — hero reveals
gsap.to(".box", { x: 300, ease: "power4.out" });   // very strong — splash screens

// The in variants accelerate instead
gsap.to(".box", { x: 300, ease: "power2.in" });    // starts slow, ends fast

// inOut combines both — for looping
gsap.to(".loader", { rotation: 360, ease: "power1.inOut", repeat: -1 });

Pro tip: GSAP’s default ease is "power1.out" (as of v3.12). Before that it was "power2.out". Both work great — don’t overthink it.

Elastic — The Rubber Band

Elastic overshoots the target and oscillates back. Think of stretching a rubber band and letting it snap.

gsap.to(".badge", {
  scale: 1.5,
  ease: "elastic.out(1, 0.3)"
  // Parameters: (amplitude, period)
  // amplitude=1 = normal bounce, >1 = more bounce
  // period=0.3 = faster oscillation
});

When to use: Sparingly. Elastic draws attention — great for celebration badges, confetti, or a “scan complete” pulse in Durga Antivirus Pro. Bad for menu items or utility controls.

Bounce — Hitting the Floor

Simulates a falling object hitting the ground and bouncing to a stop.

gsap.from(".box", { y: -200, ease: "bounce.out" });

bounce.out is the most common — the element drops and bounces. bounce.in starts with bounces and accelerates away. bounce.inOut combines both.

Back — The Slingshot

Overshoots the target slightly then settles back — like pulling a slingshot and releasing.

gsap.from(".card", {
  scale: 0,
  ease: "back.out(2)" // parameter: overshoot amount (default 1.7)
});

Best for: Pop-in effects on modals, tooltips, and cards. It gives a satisfying “snap” without the dramatic oscillation of Elastic.

Expo, Circ, Sine — Subtle Specialists

gsap.from(".hero-title", { y: 80, opacity: 0, ease: "expo.out" });

Steps — Discrete Jumps

Instead of smooth interpolation, steps(n) snaps between n discrete values.

gsap.to(".counter", {
  textContent: 100,
  ease: "steps(10)",
  snap: { textContent: 1 },
  duration: 2
});

Use for: Typewriter effects, countdown timers, frame-based sprite animations, digital clock displays.

When to Use Which Ease — Quick Reference Table

Combining Eases — Per-Property Control

You can apply different eases to different properties on the same element. This creates rich, organic motion.

gsap.to(".leaf", {
  x: 150,
  y: -80,
  rotation: 15,
  duration: 2.5,
  ease: {
    x: "sine.inOut",      // gentle sway on horizontal
    y: "power1.out",       // drifting down
    rotation: "back.out(1)" // slight snap on rotation
  }
});

Why this works: In nature, different parts of a motion behave differently. A falling leaf drifts sideways smoothly while it drops with gravity — different eases for different axes.

Follow-Through & Overlap — Realistic Movement

In the real world, parts of an object don’t all move at once. When you swing your arm, your hand lags behind. This is follow-through — trailing parts catch up later.

const tl = gsap.timeline();
// Upper arm moves first
tl.to(".arm-upper", { rotation: -30, duration: 0.4, ease: "power2.out" })
  // Forearm starts slightly before upper arm finishes
  .to(".arm-lower", { rotation: -45, duration: 0.3, ease: "power2.out" }, "-=0.15")
  // Hand lags behind even more
  .to(".hand", { rotation: -60, duration: 0.25, ease: "power2.out" }, "-=0.1");

Where you see this: DodaZIP’s file extraction progress — the progress bar fills, then the checkmark bounces in slightly after. That delay makes it feel alive.

MotionPathPlugin — Animating Along Curves

MotionPathPlugin moves an element along a curved path defined by coordinates or an SVG path. This is how you create flowing, non-linear motion.

// Register the plugin (required!)
gsap.registerPlugin(MotionPathPlugin);

// Animate along a path defined by coordinates
gsap.to(".plane", {
  motionPath: {
    path: [
      { x: 100, y: 100 },
      { x: 300, y: 50 },
      { x: 500, y: 200 }
    ],
    curviness: 1.5  // 0 = straight lines, 1-2 = smooth curve
  },
  duration: 3,
  ease: "power1.inOut"
});

Using an SVG path element:

gsap.to(".dot", {
  motionPath: {
    path: "#motionPath",     // reference to SVG <path> id
    align: "#motionPath",    // align element to path tangent
    alignOrigin: [0.5, 0.5], // center the alignment point
    autoRotate: true         // rotate to follow path direction
  },
  duration: 4,
  ease: "power1.inOut",
  repeat: -1,
  yoyo: true
});

MotionPath Options Reference

Important: MotionPathPlugin is included with GSAP but requires registration. Without gsap.registerPlugin(MotionPathPlugin), it silently fails.

Common Mistakes

1. Using ease: "linear" as default

Linear easing feels robotic. Only use it for progress bars, continuous rotations, or ScrollTrigger scrubbing.

// Use power2.out as your default
gsap.to(".box", { x: 200, ease: "power2.out" });

2. Elastic/bounce on every animation

Elastic and bounce are attention-grabbing. On utility UI (switches, menus), they become annoying fast.

// Good for a celebration
gsap.from(".badge", { scale: 0, ease: "elastic.out(1, 0.4)" });
// Bad for a menu item
gsap.from(".menu-item", { x: 20, ease: "elastic.out(1, 0.4)" }); // jarring

3. Forgetting inOut for looping animations

A looping tween with power2.out will snap harshly when it repeats.

// Snaps on repeat
gsap.to(".loader", { rotation: 360, ease: "power2.out", repeat: -1 });
// Smooth loop
gsap.to(".loader", { rotation: 360, ease: "power1.inOut", repeat: -1 });

4. MotionPath without registering the plugin

The plugin silently fails if not registered. Always call gsap.registerPlugin(MotionPathPlugin).

5. Mixing ease families that fight each other

Using elastic.out on x and power1.out on y can look chaotic. Keep ease families consistent for the same object unless you specifically want a disjointed effect.

6. Not testing eases on mobile

Elastic with high amplitude can feel slow on low-end devices. Always test on real hardware.

7. Confusing ease direction (in vs out)

ease: "power2.in" accelerates (starts slow, ends fast). If elements are entering the screen, you almost always want out, not in.

Practice Questions

1. Why does ease: "power2.out" look more natural than ease: "linear" for a card entrance?

   In the real world, objects decelerate to a stop — they don’t suddenly freeze. power2.out mimics this natural deceleration, while linear easing looks mechanical.

2. What’s the difference between elastic.out(1, 0.3) and back.out(2)?

   Elastic oscillates back and forth past the target (multiple bounces). Back overshoots once and settles. Elastic is more dramatic; Back is a quick snap.

3. If you see a harsh snap when a looping animation repeats, what’s likely wrong?

   You’re using an out variant. Switch to inOut so the animation accelerates and decelerates smoothly on both ends of the loop.

4. When should you use steps(10) instead of a smooth ease?

   For discrete visual changes — typewriter text (each character appears), countdown numbers (whole numbers only), or sprite sheet frame changes.

5. How do you make a falling element bounce realistically when it hits the ground?

   Use gsap.from() with ease: "bounce.out" on the y property, starting from a negative y value (above its final position).

Challenge

Create a “notification badge” animation: a small circle that appears on a bell icon. It should scale from 0 to 1.2 with a slight overshoot, then settle to 1.0. Use back.out for the scale. Bonus: add a subtle bounce to the bell icon itself with a slight delay (follow-through).

// Badge appears with back ease
gsap.from(".badge", {
  scale: 0,
  duration: 0.5,
  ease: "back.out(3)"
});

// Bell shakes slightly after badge appears (follow-through)
gsap.to(".bell", {
  rotation: 15,
  duration: 0.15,
  ease: "power2.out",
  yoyo: true,
  repeat: 1,
  delay: 0.3
});

FAQ

Try It Yourself — Motion Lab

Build an interactive motion lab with an ease visualizer, a draggable motion path editor, and an organic follow-through demo. This is similar to the prototyping tools DodaTech engineers use when designing animations for Doda Browser and Durga Antivirus Pro.

What’s Next

Now that you understand easing and motion paths, learn how to keep everything running smoothly.

Related topics: CSS Transitions, SVG Animation, Canvas Animation

What’s Next

Congratulations on completing this Gsap Easing Motion tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!