Core Module

Exits

19 exit animations for elements leaving the DOM or viewport. Pairs with entrances to create polished enter/leave transitions. Click any card to replay.

gleam-exits.css 19 effects fill: forwards pairs with entrances 
<!-- CSS class — element stays hidden after exit (fill: forwards) -->
<div class="gleam exit-fade-out">...</div>

<!-- Trigger on event with JS API -->
gleam.on('#close-btn', 'click', '#modal', 'exit-sink');

<!-- Animate, then remove from DOM -->
gleam.animate('#card', 'exit-zoom-out').then(() => card.remove());

Fades

exit-fade-out
exit-fade-up
exit-fade-down
exit-fade-left
exit-fade-right

Slides

exit-slide-out-up
exit-slide-out-down
exit-slide-out-left
exit-slide-out-right

Zoom & Pop

exit-zoom-out
exit-pop-out
exit-vanish

Premium

exit-sink
Settles gently downward
exit-collapse
Height collapses to zero

Blur

exit-blur-out
exit-blur-up

Bounce & Flip

exit-bounce-out
exit-flip-out-x
exit-flip-out-y

Pairing Entrances & Exits

Remove exit classes on `animationend` to re-show elements, or chain entrance + exit for page transitions.

// Modal: enter with rise, leave with sink
async function openModal(el) {
  el.hidden = false;
  await gleam.animate(el, 'entrance-rise');
}

async function closeModal(el) {
  await gleam.animate(el, 'exit-sink');
  el.hidden = true;
}

<!-- Or use data-gleam-open / data-gleam-close attributes -->
<div data-gleam-open="entrance-rise" data-gleam-close="exit-sink">...</div>

CSS Variable Reference

/* Timing */
.my-element {
  --duration: 400ms;
  --delay: 0ms;
  --ease: var(--ease-out);
}

/* Or use utility classes */
<div class="gleam exit-sink
           util-duration-600
           util-ease-snap">
/* Motion */
.my-element {
  --distance: 30px;
  --scale-end: 0.85;
  --blur-end: 12px;
}

/* Fill mode (stays hidden) */
--fill: forwards;

/* Reset after exit */
--fill: none;