JavaScript animation example
JavaScript Success Animation: Checkmark With Confetti
Success states deserve a moment of celebration. This one plays in four beats: the outline of a circle draws around, it fills with a quick pop, a checkmark strokes across it, and confetti falls behind the message. Each beat is short enough that the whole thing finishes in about a second and a half.
- 4.4 KB file
- 5 live inputs
- JavaScript runtime
How this success checkmark works
- The four beats are one timeline with overlapping starts, so it reads as one motion.
- Confetti spawns at the fill moment with random color, spin and drift, and fades as it falls.
- Click to replay; "done" fires when the checkmark completes.
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-success-animation" style="width: 100%; height: 480px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-success-animation',
fit: 'Layout',
onReady: (engine) => { },
onTrigger: (name) => {
// fires: 'done'
},
});
player.load(await (await fetch('/javascript-success-animation.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
title | Text | Payment received | — |
sub | Text | A receipt is on its way to your inbox | — |
accent | Text | #16a34a | hex colour |
ink | Text | #14532d | hex colour |
bg | Text | #f0fdf4 | hex colour |
Events: done
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.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.
The same idea in other frameworks: SwiftUI symbol effects