Breathe Effect

Sinusoidal floating animation that adds a gentle up-and-down motion to elements.

Domma.effects.breathe()

Creates a gentle up-and-down floating motion using sinusoidal easing. Perfect for stat cards, feature highlights, pricing tiers, and call-to-action elements.

// Basic usage
Domma.effects.breathe('.stat-card');

// With configuration
const breathe = Domma.effects.breathe('.element', {
  amplitude: 6,       // Vertical distance in pixels
  duration: 3000,     // Animation cycle time in ms
  stagger: 200,       // Delay between multiple elements
  pauseOnHover: true, // Pause when hovering
  iterations: 'infinite'
});

// Control methods
breathe.pause();
breathe.resume();
breathe.stop();
breathe.restart();
breathe.destroy();

Demo: Basic Breathe

Simple floating animation with control methods.

Demo: Basic Breathe

Card 1

Card 2

Card 3

<div class="demo-box" id="breathe-demo-1">
    <div class="demo-item">Card 1</div>
    <div class="demo-item">Card 2</div>
    <div class="demo-item">Card 3</div>
</div>
<button type="button" class="btn btn-primary" id="breathe-start-1">Start</button>
<button type="button" class="btn btn-secondary" id="breathe-pause-1">Pause</button>
<button type="button" class="btn btn-secondary" id="breathe-resume-1">Resume</button>
<button type="button" class="btn btn-danger" id="breathe-stop-1">Stop</button>

/**
 * Demo: Basic Breathe - from public/showcase/effects/breathe.
 */
export function mount(root) {
        // Store control objects
    let breathe1, breathe2, breathe3, breathe4;
        // breathe() Demo 1 - Basic
    $(root).find('#breathe-start-1').on('click', () => {
          if (breathe1) breathe1.destroy();
          breathe1 = Domma.effects.breathe('#breathe-demo-1 .demo-item', {
            amplitude: 6,
            duration: 3000,
            respectMotionPreference: false
          });
        });
    $(root).find('#breathe-pause-1').on('click', () => {
          if (breathe1) breathe1.pause();
        });
    $(root).find('#breathe-resume-1').on('click', () => {
          if (breathe1) breathe1.resume();
        });
    $(root).find('#breathe-stop-1').on('click', () => {
          if (breathe1) {
            breathe1.stop();
            breathe1 = null;
          }
        });
}

Demo: Stagger Effect

Cascading animations with 150ms delay between elements.

Demo: Stagger Effect

Item 1

Item 2

Item 3

Item 4

<div class="demo-box" id="breathe-demo-2">
    <div class="demo-item">Item 1</div>
    <div class="demo-item">Item 2</div>
    <div class="demo-item">Item 3</div>
    <div class="demo-item">Item 4</div>
</div>
<button type="button" class="btn btn-primary" id="breathe-start-2">Start Stagger</button>

/**
 * Demo: Stagger Effect - from public/showcase/effects/breathe.
 */
export function mount(root) {
        // Store control objects
    let breathe1, breathe2, breathe3, breathe4;
        // breathe() Demo 2 - Stagger
    $(root).find('#breathe-start-2').on('click', () => {
          if (breathe2) breathe2.destroy();
          breathe2 = Domma.effects.breathe('#breathe-demo-2 .demo-item', {
            amplitude: 8,
            duration: 2500,
            stagger: 150,
            respectMotionPreference: false
          });
        });
}

Domma.effects.breathe('#breathe-demo-2 .demo-item', {
  amplitude: 8,
  duration: 2500,
  stagger: 150
});

Demo: Amplitude Variations

Different vertical movement distances.

Demo: Amplitude Variations

Small (4px)

Medium (8px)

Large (16px)

<div class="demo-box" id="breathe-demo-3">
    <div class="demo-item" data-amplitude="4">Small (4px)</div>
    <div class="demo-item" data-amplitude="8">Medium (8px)</div>
    <div class="demo-item" data-amplitude="16">Large (16px)</div>
</div>
<button type="button" class="btn btn-primary" id="breathe-start-3">Start Variations</button>

/**
 * Demo: Amplitude Variations - from public/showcase/effects/breathe.
 */
export function mount(root) {
        // Store control objects
    let breathe1, breathe2, breathe3, breathe4;
        // breathe() Demo 3 - Amplitude Variations
    $(root).find('#breathe-start-3').on('click', () => {
          if (breathe3) breathe3.destroy();

          // Apply different amplitudes to each item
          $('#breathe-demo-3 .demo-item').each(function() {
            const amplitude = parseInt($(this).attr('data-amplitude')) || 6;
            Domma.effects.breathe(this, {
              amplitude: amplitude,
              duration: 3000,
              respectMotionPreference: false
            });
          });
        });
}

// Apply different amplitudes to each item
$('#breathe-demo-3 .demo-item').each(function() {
  const amplitude = parseInt($(this).attr('data-amplitude')) || 6;
  Domma.effects.breathe(this, {
    amplitude: amplitude,
    duration: 3000
  });
});

Demo: Pause on Hover

Animation pauses when you hover over elements.

Demo: Pause on Hover

Hover Me 1

Hover Me 2

Hover Me 3

<div class="demo-box" id="breathe-demo-4">
    <div class="demo-item">Hover Me 1</div>
    <div class="demo-item">Hover Me 2</div>
    <div class="demo-item">Hover Me 3</div>
</div>
<button type="button" class="btn btn-primary" id="breathe-start-4">Start with Pause on Hover</button>

/**
 * Demo: Pause on Hover - from public/showcase/effects/breathe.
 */
export function mount(root) {
        // Store control objects
    let breathe1, breathe2, breathe3, breathe4;
        // breathe() Demo 4 - Pause on Hover
    $(root).find('#breathe-start-4').on('click', () => {
          if (breathe4) breathe4.destroy();
          breathe4 = Domma.effects.breathe('#breathe-demo-4 .demo-item', {
            amplitude: 10,
            duration: 2000,
            pauseOnHover: true,
            respectMotionPreference: false
          });
        });
}

Domma.effects.breathe('#breathe-demo-4 .demo-item', {
  amplitude: 10,
  duration: 2000,
  pauseOnHover: true
});