The reveal() effect uses IntersectionObserver to trigger CSS transitions when elements scroll into view. Supports fade, slide, zoom, and flip animations with stagger support for groups of elements.

// Simple fade-in on scroll
Domma.effects.reveal('.card');

// Slide up with stagger
const ctrl = Domma.effects.reveal('.feature', {
  animation: 'slide-up',
  duration: 800,
  stagger: 100,
  threshold: 0.2,
  onReveal: (el) => console.log('Revealed:', el)
});

// Clean up
ctrl.destroy();

Elements fade in smoothly as they enter the viewport.

Domma.effects.reveal('.reveal-fade-demo', {
  animation: 'fade',
  duration: 600,
  stagger: 150
});

Elements slide upward from below as they enter.

Domma.effects.reveal('.reveal-slideup-demo', {
  animation: 'slide-up',
  duration: 800,
  stagger: 120,
  easing: 'ease-out'
});

Elements slide in from the sides.

// Slide in from right
Domma.effects.reveal('.slide-left', { animation: 'slide-left' });

// Slide in from left
Domma.effects.reveal('.slide-right', { animation: 'slide-right' });

Elements scale up from a smaller size.

Domma.effects.reveal('.reveal-zoom-demo', {
  animation: 'zoom',
  duration: 700,
  stagger: 200
});

Elements flip in with a 3D perspective transform.

Domma.effects.reveal('.flip-card', {
  animation: 'flip',
  duration: 900
});

With once: false, elements re-animate every time they enter the viewport. Scroll up and down to see them repeat.

Domma.effects.reveal('.repeatable', {
  animation: 'slide-up',
  once: false  // Re-animate on re-entry
});