Achievement Unlock Toast — Free HTML CSS JS Snippet

Games like Steam, Xbox, and PlayStation solved a UI problem long before web apps needed to: what happens when the user does two things worth celebrating within the same second? If both toasts render at once, they overlap and neither is readable. If the second replaces the first mid-animation, the player never actually sees what they earned. The correct answer, used by every console overlay, is a queue — one toast on screen at a time, everything else waits its turn. This snippet implements exactly that pattern with a plain JavaScript array and a boolean lock, no external state library, and applies it to a celebratory "Achievement Unlocked" toast with a spring-overshoot badge entrance and a small radial spark burst.

The queue: an array plus a lock flag

The entire scheduling logic is two module-level variables: queue, a plain array acting as FIFO storage, and isShowing, a boolean lock. queueAchievement(data) does one thing — queue.push(data) — then calls tryShowNext(). That function is the gatekeeper: if isShowing is true, it returns immediately and does nothing, leaving the new item sitting safely in the array. If nothing is showing and the queue has an item, it calls queue.shift() to pull the oldest entry off the front, sets isShowing = true, and renders it. The lock is only released back to false inside dismiss(), right before tryShowNext() is called again — which is what lets the next queued achievement (if any) begin its own entrance animation. This shift-then-lock-then-unlock-then-recurse loop is the same shape used by toast notification libraries, upload-progress queues, and chat "typing" indicator sequencing in production apps; the achievement toast is just a concrete, visual place to see it work.

Why shift() and not pop()

Using Array.prototype.shift() instead of pop() is deliberate — it takes from the front of the array, preserving the order achievements were earned in. If pop() were used instead, firing three achievements quickly would show the last-earned one first, which reads as a bug to any player watching their own accomplishments play back out of order. FIFO ordering is the entire point of a notification queue; a stack (LIFO) is the wrong data structure here even though both are one-line changes.

Spring-overshoot entrance with cubic-bezier

The badge and toast card both animate in using a CSS @keyframes rule driven by cubic-bezier(0.34, 1.56, 0.64, 1) — a bezier curve whose second control point exceeds 1, which is what produces the overshoot: the element grows past its final scale of 1 before settling back down, mimicking a physical spring rather than a linear ease. The badge keyframes go further, adding a rotation from -140 degrees back to 0 degrees so the medal appears to spin into place rather than simply grow. Because this is pure CSS animation rather than a JavaScript physics simulation, it runs on the compositor thread and stays smooth even while other work (like the spark burst) is happening on the main thread at the same time.

The spark burst: trigonometry, not sprites

Ten span.spark elements are generated in a loop, each positioned with Math.cos(angle) * distance and Math.sin(angle) * distance where angle divides a full circle (2π) into ten equal slices. Those computed x/y offsets are written as CSS custom properties (--sx, --sy) directly in each spark's inline style, and a shared @keyframes sparkFly rule reads them via translate(var(--sx), var(--sy)) to fly every spark outward along its own radius. Staggering each spark's animation-delay by a small per-index offset makes the burst feel organic rather than a single synchronized pop, without needing any actual particle-system library.

Auto-dismiss synced to a real progress bar

The thin bar under the toast is not decorative — its animation-duration is set in JavaScript to the exact same AUTO_DISMISS_MS value used in the setTimeout that removes the toast, using scaleX(1) to scaleX(0) as a literal, linear countdown the user can watch. Clicking the toast clears that timeout and dismisses immediately, so a player who already read their achievement is never stuck waiting. Either path — timeout or click — funnels into the same dismiss() function, which listens for animationend on the CSS-driven exit animation before actually removing the DOM node and releasing the isShowing lock, guaranteeing the exit animation always finishes cleanly before the next queued toast begins its own entrance.