InertiaPlugin
InertiaPlugin is a GSAP plugin that reads the velocity of a property and, when you let go, glides it to a natural stop based on how fast it was moving. It's what turns a drag into a throw: flick harder and the element travels farther, then decelerates and lands, optionally snapping to a value or clamping inside bounds.
Updated July 1, 2026
How InertiaPlugin works
InertiaPlugin doesn't animate to a fixed end point. You give it a starting velocity (in units per second) and it calculates the landing spot from that velocity plus a resistance value. A fast flick decays over a longer distance, a gentle nudge barely moves. That's the whole trick: the distance is derived from the throw, not hardcoded.
The most common setup is to let it read the velocity for you. Call InertiaPlugin.track() on the property while the user is dragging, then pass "auto" on release so the tween continues from whatever speed the element was actually moving at.
For drag-and-throw you rarely wire this by hand. Draggable with inertia: true tracks velocity and fires the inertia tween on release automatically, so you get flick-to-throw for one line of config.
To land on specific positions instead of wherever the velocity runs out, pass an end value. It can be a single number, an array (it snaps to the closest one), or a function that receives the natural landing value and returns the one you actually want.
Use it for
Momentum is a physics effect CSS can't express. A transition runs for a fixed duration no matter how hard you flicked, so throw-and-glide has to come from JS. Only 18.4% of mobile pages load any JS animation library at all (HTTP Archive Web Almanac, 2024), which is part of why real momentum still reads as a considered detail rather than a default.
- Flick-to-scroll carousels and draggable galleries where release should keep the content gliding
- Rotary controls (knobs, dials, circular sliders) that spin on and settle after a throw
- Draggable cards or sheets that need to snap to the nearest slot after being flung
- Any value you're already dragging where letting go should decelerate instead of stopping dead
Use something else when
- You don't need snapping or bounds and want zero plugin weight, hand-roll a velocity lerp: track the pointer delta, then each tick do
current += (target - current) * ease. That's the throw feel without InertiaPlugin (it's how the Infinite Draggable Grid does it) - You just want a high-frequency element to follow the cursor smoothly, use
gsap.quickTowith a duration, not inertia - The motion is a fixed entrance or exit, a normal
expo.out/power4.outtween is simpler than deriving distance from velocity - You only need swipe direction, not momentum, use
Observerto read the gesture and branch on it
Used in these Annnimate components
- Circular Slider wires
Draggablewithtype: "rotation"andinertia: true, so a flick keeps the knob spinning after you release, then InertiaPlugin decelerates it and lands on the nearest snap value. - Infinite Draggable Grid wants the same throw-and-glide feel but hand-rolls it with a velocity lerp toward a target position instead of InertiaPlugin, which is the lighter route when you don't need snapping or hard bounds.
Respect reduced motion
prefers-reduced-motion targets, and that query is now set on over 50% of mobile sites (Web Almanac, 2024). Gate the inertia inside gsap.matchMedia() and fall back to an instant snap or a short fixed tween when reduce is on. Drag itself stays, it's user-driven, it's the decay you soften.See it running in production
Infinite Draggable GridA row of items you can drag through sideways, with momentum, that loops forever so you never hit the end.
Circular SliderA row of cards sitting on a big circle that curve past as you drag, throw or use the arrows, then snap to the nearest one.
Drift GalleryA row of product cards drifting sideways on their own that you can grab and throw, and they keep going before they settle.Common questions
- Is InertiaPlugin free or is it a paid Club GSAP plugin?
- It's free. Every GSAP plugin, including InertiaPlugin, became 100% free for commercial use with GSAP 3.13 in 2024 after Webflow took over GreenSock. Older tutorials calling it a Club-only plugin (or by its old name, ThrowPropsPlugin) predate that change.
- How do I use inertia without Draggable?
- Track the property's velocity while it's changing with
InertiaPlugin.track(target, "x"), then on release rungsap.to(target, { inertia: { x: "auto" } }). The"auto"tells it to continue from the tracked velocity. If you don't track it, pass an explicit velocity number (units per second) instead. - What's the difference between inertia and a normal ease-out tween?
- An ease-out tween has a fixed duration and a fixed end point, it always travels the same distance in the same time. Inertia derives both from the release velocity, so a hard flick coasts farther and longer than a gentle one. Use ease-out for scripted motion, inertia for anything the user physically threw.
- How do I make a thrown element snap to set positions?
- Use the
endproperty inside the inertia object. Pass an array of allowed values to snap to the closest one, or a function that receives the natural landing value and returns the position you want (for exampleMath.round(value / 45) * 45to land on 45-degree notches). With Draggable, use itssnapoption, which routes into the same inertia landing. - Why isn't my inertia: 'auto' doing anything?
"auto"only works if the property was being tracked when you release, so callInertiaPlugin.track(target, "x")first (Draggable does this for you wheninertia: true). Also confirm you registered both the plugin and Draggable withgsap.registerPlugin(Draggable, InertiaPlugin), forgetting registration is the most common reason nothing moves.
