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

Simple floating animation with control methods.

Cascading animations with 150ms delay between elements.

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

Different vertical movement distances.

// 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
  });
});

Animation pauses when you hover over elements.

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