❮ Previous Next ❯

GSAP InertiaPlugin (Momentum & Throw Animations)

  • InertiaPlugin adds realistic momentum and throw behavior to GSAP animations, especially when combined with Draggable.

  • Introduction

    InertiaPlugin is a GSAP plugin that adds realistic momentum and physics-based motion to animations.

    It is most commonly used with:

    • Drag & swipe interactions

    • Throw effects

    • Momentum scrolling

    • Natural-feeling UI motion

    InertiaPlugin is a premium plugin from GreenSock GSAP.

  • What Problem Does InertiaPlugin Solve?

    Without inertia:

    • Dragging stops suddenly

    • Motion feels robotic

    With inertia:

    • Objects keep moving naturally

    • Motion slows down gradually

    • Feels like real-world physics

    👉 Think of it as “natural momentum after release”.

Installation / Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/InertiaPlugin.min.js"></script>
gsap.registerPlugin(InertiaPlugin);

  • Basic Concept

    Inertia works by:

    • Detecting speed and direction

    • Continuing movement after release

    • Gradually slowing down using resistance

    You don’t animate duration — GSAP calculates it automatically.

With Draggable (Most Common) 

Draggable.create(".box", {
  inertia: true
});

  • Parameters / Options

    OptionMeaningExample
    inertiaEnable momentumtrue
    resistanceHow fast it slows1000
    minMinimum value0
    maxMaximum value500
    endCustom snap/endvalue => value

Simple Throw Effect 

Draggable.create(".ball", {
  type: "x,y",
  inertia: true
});

Inertia with Bounds 

Draggable.create(".box", {
  type: "x",
  bounds: ".container",
  inertia: true
});

Custom Resistance 

Draggable.create(".card", {
  inertia: true,
  resistance: 800
});

Snap with Inertia 

Draggable.create(".item", {
  type: "x",
  inertia: true,
  snap: { x: [0, 200, 400] }
});

Inertia Without Draggable 

gsap.to(".box", {
  inertia: {
    x: { velocity: 500, min: 0, max: 600 }
  }
});

  • Best Practices

    • Always combine inertia with bounds

    • Tune resistance for natural feel

    • Use snap for sliders and carousels

    • Avoid heavy DOM work during motion

  • Comparison

    MethodMotion Feel
    InertiaPluginNatural & physics-based
    CSS easingArtificial
    Manual JS mathComplex
    Native scrollLimited control

  • Quick Summary

    • InertiaPlugin adds momentum

    • Works best with Draggable

    • Creates natural throw effects

    • Premium GSAP plugin

    • Ideal for modern interactive UI

❮ Previous Next ❯