Physics2D Particle Burst — Free GSAP Physics Snippet

Every other tween in this library animates from a start value to an end value. This one doesn't: click the stage and 28 particles are given *launch conditions* — a speed, a direction, and gravity — and GSAP's Physics2DPlugin (free on the CDN since 3.13) integrates the resulting parabolic trajectories. No destination is ever specified; where each particle lands is an outcome, not an input. That inversion is what makes physics-based motion feel organic where eased tweens feel staged.

velocity + angle + gravity is the whole model

physics2D takes initial velocity (pixels/second), a launch angle (degrees, where 270 is straight up in screen coordinates), and a gravity acceleration. Each frame it advances position along the velocity vector while gravity bends it downward — projectile motion, integrated for you. Randomizing velocity (180–480) and angle (230–310, an upward cone) per particle produces the natural spread of a real burst: fast particles fly wide and high, slow ones flop shortly, all on true parabolas rather than eased arcs.

ease: 'none' is mandatory here

Easing curves remap time — which would distort the physics. With ease: 'none', simulation time runs linearly and the *acceleration itself* provides all the perceived easing: particles launch fast, hang weightless at apex, and accelerate into the fall. That's why physics motion needs no easing — gravity *is* the ease.

gsap.utils.random powers the variety

Size, color rotation, launch speed, direction, spin, and lifetime are all drawn from gsap.utils.random ranges — six randomized dimensions per particle. The string form rotation: '+=random(-180, 180)' shows GSAP's inline random syntax: a relative spin unique per particle without writing a loop variable. Uniform particles read as a rigid fountain; layered randomness reads as confetti.

Particles are disposable DOM, cleaned by their own tween

Each dot is a tiny absolutely-positioned div appended on click and removed in its own onComplete (via this.targets()[0]), so the DOM returns to baseline after every burst — no pooling, no leaks, no cap logic. At 28 particles per click with transform-and-opacity-only animation, even rapid clicking stays comfortably within compositor budget; past a few hundred simultaneous particles you'd graduate to canvas.

pointerdown, not click, for responsiveness

Bursts fire on pointerdown so the explosion lands at the instant of press — the 100–300ms a click waits for release makes celebratory feedback feel detached. Coordinates convert from client space to stage space via getBoundingClientRect, so the burst originates exactly under the pointer regardless of page scroll.

Where physics beats confetti libraries

Libraries like canvas-confetti own their canvas and their look. Physics2D applies the same math to *any tweenable target* — DOM nodes, SVG elements, WebGL objects — so branded shapes, emoji, or product icons can explode with identical physics, and every burst composes with the rest of your GSAP timeline system.

Customizing it

Narrow the angle cone for directional cannons, raise gravity for heavier debris, or swap dots for emoji spans. Related celebration and physics patterns: confetti button, confetti celebration card, gravity-and-collision in physics balls, and friction-based motion in physics props pucks.