PhysicsProps Friction Pucks — Free GSAP Physics Snippet

This demo is a physics lesson as UI: three hockey pucks receive the *same* 620px/s launch velocity, but different friction coefficients — 0.02, 0.08, 0.2 — so they glide to three very different stopping points. Nothing specifies where any puck ends; friction decides. That's GSAP's PhysicsPropsPlugin (free on the CDN since 3.13): per-property physics simulation where motion comes from velocity, acceleration, and friction rather than destinations.

physicsProps vs physics2D: the mental model

Where Physics2D simulates a *point moving through 2D space* (one velocity vector plus an angle and gravity), physicsProps applies independent physics to *any individual properties*: give x a velocity and friction, give rotation its own, even drive opacity or a filter value with simulated momentum. It's the general-purpose form — each property gets its own tiny simulation, and they don't need to agree with each other.

Friction is exponential decay, and it shows

Each tick, friction removes a fraction of the remaining velocity — so speed decays exponentially, which is why the pucks' deceleration looks so different from an eased tween's. The 0.02 puck coasts nearly frictionlessly across the lane; 0.08 pulls up around two-thirds in; 0.2 dies within the first stretch. Same push, three visibly honest physics outcomes — the comparison *is* the demo, and it's why identical velocity matters: change one variable, see its effect.

No end values means kill-and-relaunch is the reset pattern

Because physics tweens don't know their destinations, "replay" can't rewind to defined endpoints. The launch handler calls gsap.killTweensOf(puck) then gsap.set(puck, { x: 0 }) — kill whatever simulation is running, teleport home, launch fresh. The reset button does the same but tweens home smoothly. This kill-set-launch idiom is standard for any launch-condition animation.

ease: 'none' again — friction is the easing

As with all physics plugins, easing would remap simulation time and corrupt the decay curve. Linear time in, physics out: the deceleration users see is purely the friction model, which is exactly what makes it look like ice instead of animation.

The spin is a deliberate contrast

Each puck also rotates — but via a plain power2.out tween whose total spin is *derived from* its friction value (slipperier pucks spin more). It demonstrates the boundary: rotation here is choreography (a known end angle, eased), while x is simulation (no known end). Mixing both on one element is normal GSAP practice — properties are independent.

Where acceleration fits

This demo uses velocity + friction, but physicsProps also accepts acceleration per property — a constant force. y with positive acceleration is gravity; x with negative acceleration is a headwind. Velocity + acceleration + friction covers thrown, falling, launched, and decaying motion for any property you can tween.

Customizing it

Make friction user-editable, add lanes, or apply the same model to a scroll position or slider value. Related motion: momentum dragging in drag throw notes (InertiaPlugin is this idea attached to gestures), parabolic bursts in physics 2d burst, bouncing in custom bounce ball, and collision toys in physics balls.