JavaScript animation example
JavaScript Button Animation: Magnetic Button With Confetti
Magnetic buttons were made popular by award-winning agency sites. As the cursor approaches, the button leans toward it, and the label inside moves even more, which adds depth. Click it and confetti bursts out with gravity and spin. Everything springs back when the pointer leaves.
- 4.3 KB file
- 5 live inputs
- JavaScript runtime
How this magnetic confetti button works
- Within the attraction radius, the button offset is a fraction of the pointer offset, smoothed by a spring.
- The label uses a larger fraction than the button, creating a parallax between them.
- Confetti pieces are rotated rectangles with gravity and drag; "click" fires on press.
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-magnetic-button" style="width: 100%; height: 440px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-magnetic-button',
fit: 'Layout',
onReady: (engine) => { },
onTrigger: (name) => {
// fires: 'click'
},
});
player.load(await (await fetch('/javascript-magnetic-button.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
label | Text | Claim reward | — |
strength | Number | 0.35 | 0 – 0.8 |
accent | Text | #111827 | hex colour |
accent2 | Text | #f59e0b | hex colour |
bg | Text | #f5f5f4 | hex colour |
Events: click
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.
The same idea in other frameworks: React liquid fill button · Flutter speed dial fab · Flutter animated login form