Core Module

Entrances

30 entrance animations for elements coming into view. Compose with utilities to control duration, delay, easing, and distance. Click any card to replay.

gleam-entrances.css 30 effects CSS variables 
<!-- CSS class -->
<div class="gleam entrance-fade-up">...</div>

<!-- data-gleam attribute (zero-config) -->
<div data-gleam="fade-up" data-gleam-scroll>...</div>

<!-- JS API -->
gleam.animate('.cards', 'rise', { delay: 200, duration: 700 });

Fades

entrance-fade-in
entrance-fade-up
entrance-fade-down
entrance-fade-left
entrance-fade-right

Slides

entrance-slide-up
entrance-slide-down
entrance-slide-left
entrance-slide-right

Zoom & Pop

entrance-zoom-in
entrance-pop-in
entrance-pop-in-soft

Premium

entrance-rise
Glass-like, barely perceptible
entrance-spring-up
Assertive spring overshoot

Blur

entrance-blur-in
entrance-blur-up
entrance-blur-down

Bounce

entrance-bounce-in
entrance-bounce-in-up
entrance-bounce-in-down
entrance-bounce-in-left
entrance-bounce-in-right

Flips

entrance-flip-in-x
entrance-flip-in-y
entrance-unfold-up
entrance-unfold-down

Clip Reveals

entrance-reveal-up
entrance-reveal-down
entrance-reveal-left
entrance-reveal-right
entrance-roll-in-left
entrance-roll-in-right

CSS Variable Reference

/* Timing */
.my-element {
  --duration: 700ms;
  --delay: 200ms;
  --ease: var(--ease-spring);
}

/* Or use utility classes */
<div class="gleam entrance-rise
           util-duration-700
           util-delay-200
           util-ease-spring">
/* Motion */
.my-element {
  --distance: 40px;
  --scale-start: 0.85;
  --blur-start: 16px;
}

/* Easing options */
--ease-out   /* soft land */
--ease-spring/* bouncy */
--ease-bounce/* dramatic */
--ease-snap  /* fast snap */

Stagger Demo

// JS API — stagger 6 elements, 90ms between each
gleam.stagger('.items', 'fade-up', { interval: 90 });

<!-- data-gleam — stagger direct children -->
<div data-gleam="fade-up" data-gleam-scroll
     data-gleam-stagger="90">
  <div>...</div>
  <div>...</div>
</div>