Animated Like Button

What's Included

• index.html: the demo page and the markup to copy

• assets/style.css: component styles, every colour and size a plain CSS custom property

• assets/script.js: readable, commented source with an onReady guard

• Icon springs back on an elastic ease, with a ring pulse behind it

• Radial burst of eleven pooled DOM particles, no canvas and no library

• Particles are removed from the DOM on completion and reused on the next press

• Count rolls one digit up on press and back down on un-press

• Un-press is a short flat shrink, not a second celebration

• Reduced motion skips the particles entirely and flips the state instantly

• Light and dark themes, every colour a custom property

• window.reactionBurst.toggle / count / reset for your own code

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

The inline line only gates the ring's hidden start state, so a no-JavaScript visitor never sees a stray circle behind the icon.

2. Add to your <body>:

Copy a <div class="rx-row"> block out of index.html. Each reaction is one <button class="rx-btn" data-reaction="..."> holding an .rx-icon (with its .rx-burst origin, its .rx-ring and an SVG glyph), an .rx-name and an .rx-count stack. Use one button or ten, in one row or in many: the script wires every .rx-btn it finds inside the #rxRow container.

The message rows the demo hangs the chips on (.stage-msg, the avatar, the name and the time) are demo furniture, not part of the component. So are the toolbar across the top and its two controls. Delete them and put the .rx-row wherever your own product needs it; only the #rxRow container around the buttons has to survive.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

4. Drive it, or read it, from your own code:

Code snippet omitted: it ships with the download.

Seed a real count by putting it on the button and in the visible span before the script runs:

Code snippet omitted: it ships with the download.

Post the new value to your API from inside the click handler in press(); the animation does not wait on it, which is what makes the button feel instant.

Using It With Your Own Design

What the component actually requires:

• A .rx-icon with position: relative, holding a zero-size .rx-burst pinned at its centre. That point is the burst origin; move it and the particles start somewhere else.
• An .rx-count with overflow: hidden and a fixed height, holding .rx-count-now in flow and .rx-count-next absolutely on top of it. The roll is only those two elements passing each other.
• A --rx-accent custom property on each button. One rule per data-reaction value maps it to whatever colour that reaction should throw.
• Nothing in your CSS may set a transform on the button, the icon, the ring or a particle. GSAP animates scale, x, y and yPercent on those, and a CSS transform is parsed into the same values and fights them.

What is only the demo's dressing and can be deleted: the .rx-name labels, the status line, the message rows and the toolbar controls. Swap the SVG glyphs for your own freely; the stroke-to-fill switch is one CSS rule keyed on .is-on, and any open path you do not want filled just needs the rx-spark class.

How It Works

Pooled particles, not a canvas. A burst asks a pool array for eleven spans, creating one only when the pool is empty. Each is appended to the zero-size origin at the centre of the icon, given an angle spread evenly around the circle with a small random jitter and a random distance, then tweened out on x and y while scale and opacity fall away. On completion the span is removed from the DOM and pushed back to the pool, so a hundred presses still allocate eleven elements.

The spring is the ease, not a physics loop. The press sets the icon to scale: 0.55 and tweens it to 1 on elastic.out(1, 0.42). That single ease carries the overshoot and the settle, which is why the whole gesture costs one tween.

Rolling one digit. The count is a clipped box with two stacked spans. The incoming value is written into the hidden one, placed a full height below (or above, when the count goes down) with yPercent, and the two are tweened past each other. When the tween lands the visible span takes the new text, both are reset to their resting offsets and the hidden one is emptied, so the next roll starts from a clean stack.

Colours come from the variant. Each button carries its own --rx-accent. The script reads it with getComputedStyle on the button at the moment a burst fires, never from a literal in the code, so switching data-variant mid-session produces the right particles on the next press.

Themes

One design at two token values. Set the attribute on <body> in the demo, or on any ancestor of the component in your own page:

Code snippet omitted: it ships with the download.

Nothing else changes: same markup, same script, and nothing in the JavaScript ever reads the theme name. The demo's toolbar toggle and the ?variant=light URL parameter only set that attribute.

Every colour the component and the demo ground use is a custom property defined in both body[data-variant="light"] and body[data-variant="dark"] in assets/style.css:

To re-value it for your own brand, change those properties in the two blocks; no selector override is needed anywhere. The like reaction carries the accent and the other two are muted status tones, which is what keeps a row of three from reading as confetti.

Customisation

The spring is the elastic.out(1, 0.42) ease in press(); drop the second number for a longer wobble. The un-press shrink is the 0.78 scale on the line below it.

Accessibility

Keyboard and ARIA contract. Each reaction is a native <button> with aria-pressed reflecting whether the reaction is on. Tab reaches every chip in document order; Enter and Space press it, exactly as a click does, and the burst plus the count roll run either way. The accessible name is rewritten on every change ("Like, 13 reactions"), and a role="status" line announces the change politely. There is no roving tabindex and no custom key handling to conflict with your own.

• Every reaction is a real <button> carrying aria-pressed, so the on and off states are announced rather than only coloured.
• The accessible name is rewritten on every change to "Like, 1 reaction", so the count is spoken with the control instead of being a loose number beside it.
• A role="status" line announces the change as well, for screen readers that do not re-read a pressed state.
• Particles and the ring are aria-hidden decoration; nothing about the state depends on them.
• Under prefers-reduced-motion: reduce the burst and the ring are skipped entirely and every duration collapses to zero, so the state flips with no motion.
• With JavaScript off the buttons are still buttons and the counts are still readable; nothing is hidden behind a class that never arrives.
• Focus is visible on the buttons and on the demo toolbar controls via :focus-visible outlines.

Requirements

• GSAP 3.12+ (core only, no plugins)
• No build step, no framework