Reveal Effect

Scroll-triggered entrance animations using IntersectionObserver. Elements animate into view as they enter the viewport.

Domma.effects.reveal()

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();

Demo: Fade (Default)

Elements fade in smoothly as they enter the viewport.

Demo: Fade (Default)

Fast

Lightning performance

Secure

Built-in protection

Clean

Readable API

<div class="reveal-card reveal-fade-demo">
    <div style="font-size: 2rem;" data-icon="zap"></div>
    <h4>Fast</h4>
    <p>Lightning performance</p>
</div>
<div class="reveal-card reveal-fade-demo">
    <div style="font-size: 2rem;" data-icon="shield"></div>
    <h4>Secure</h4>
    <p>Built-in protection</p>
</div>
<div class="reveal-card reveal-fade-demo">
    <div style="font-size: 2rem;" data-icon="code"></div>
    <h4>Clean</h4>
    <p>Readable API</p>
</div>

/**
 * Demo: Fade (Default) - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Fade demo
    Domma.effects.reveal('.reveal-fade-demo', {
          animation: 'fade',
          duration: 600,
          stagger: 150,
          respectMotionPreference: false
        });
}

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

Demo: Slide Up

Elements slide upward from below as they enter.

Demo: Slide Up

Feature One

Slide-up entrance

Feature Two

Staggered timing

Feature Three

Smooth easing

Feature Four

GPU-accelerated

<div class="reveal-card reveal-slideup-demo">
    <h4>Feature One</h4>
    <p>Slide-up entrance</p>
</div>
<div class="reveal-card reveal-slideup-demo">
    <h4>Feature Two</h4>
    <p>Staggered timing</p>
</div>
<div class="reveal-card reveal-slideup-demo">
    <h4>Feature Three</h4>
    <p>Smooth easing</p>
</div>
<div class="reveal-card reveal-slideup-demo">
    <h4>Feature Four</h4>
    <p>GPU-accelerated</p>
</div>

/**
 * Demo: Slide Up - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Slide up demo
    Domma.effects.reveal('.reveal-slideup-demo', {
          animation: 'slide-up',
          duration: 800,
          stagger: 120,
          respectMotionPreference: false
        });
}

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

Demo: Slide Left & Right

Elements slide in from the sides.

Demo: Slide Left & Right

From the Right

Slides left into view

From the Left

Slides right into view

<div class="col-6">
    <div class="reveal-card reveal-slideleft-demo">
        <h4>From the Right</h4>
        <p>Slides left into view</p>
    </div>
</div>
<div class="col-6">
    <div class="reveal-card reveal-slideright-demo">
        <h4>From the Left</h4>
        <p>Slides right into view</p>
    </div>
</div>

/**
 * Demo: Slide Left & Right - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Slide left demo
    Domma.effects.reveal('.reveal-slideleft-demo', {
          animation: 'slide-left',
          duration: 700,
          respectMotionPreference: false
        });
        // Slide right demo
    Domma.effects.reveal('.reveal-slideright-demo', {
          animation: 'slide-right',
          duration: 700,
          respectMotionPreference: false
        });
}

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

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

Demo: Zoom

Elements scale up from a smaller size.

Demo: Zoom

🚀

Launch

⚡

Speed

🎯

Precision

<div class="reveal-card reveal-zoom-demo">
    <div style="font-size: 3rem;">🚀</div>
    <h4>Launch</h4>
</div>
<div class="reveal-card reveal-zoom-demo">
    <div style="font-size: 3rem;">⚡</div>
    <h4>Speed</h4>
</div>
<div class="reveal-card reveal-zoom-demo">
    <div style="font-size: 3rem;">🎯</div>
    <h4>Precision</h4>
</div>

/**
 * Demo: Zoom - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Zoom demo
    Domma.effects.reveal('.reveal-zoom-demo', {
          animation: 'zoom',
          duration: 700,
          stagger: 200,
          respectMotionPreference: false
        });
}

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

Demo: Flip

Elements flip in with a 3D perspective transform.

3D Flip Entrance

Uses perspective transform for depth

<div class="reveal-card reveal-flip-demo" style="max-width: 400px; margin: 0 auto;">

    <p>Uses perspective transform for depth</p>
</div>

/**
 * 3D Flip Entrance - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Flip demo
    Domma.effects.reveal('.reveal-flip-demo', {
          animation: 'flip',
          duration: 900,
          respectMotionPreference: false
        });
}

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

Demo: Re-animate on Re-entry

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

Demo: Re-animate on Re-entry

Repeatable

Animates on every scroll

Repeatable

Scroll up and back down

<div class="reveal-card reveal-repeat-demo">
    <h4>Repeatable</h4>
    <p>Animates on every scroll</p>
</div>
<div class="reveal-card reveal-repeat-demo">
    <h4>Repeatable</h4>
    <p>Scroll up and back down</p>
</div>

/**
 * Demo: Re-animate on Re-entry - from public/showcase/effects/reveal.
 */
export function mount(root) {
        // Repeat demo
    Domma.effects.reveal('.reveal-repeat-demo', {
          animation: 'slide-up',
          duration: 600,
          stagger: 100,
          once: false,
          respectMotionPreference: false
        });
}

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

Options Reference

Option	Type	Default	Description
`animation`	string	'fade'	Animation type: 'fade', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'zoom', 'flip'
`duration`	number	600	Animation duration in ms
`easing`	string	'ease-out'	CSS easing function
`delay`	number	0	Delay before animation in ms
`stagger`	number	0	Delay between multiple elements in ms
`threshold`	number	0.1	IntersectionObserver threshold (0-1)
`rootMargin`	string	'0px'	Observer root margin
`once`	boolean	true	Only animate once, or re-animate on re-entry
`respectMotionPreference`	boolean	true	Honour prefers-reduced-motion
`onReveal`	function	null	Callback per element when revealed