Pulse Effect

Grow-and-shrink scale animation perfect for notification indicators and status badges.

Domma.effects.pulse()

Creates a grow-and-shrink breathing effect using scale transforms. Ideal for notification dots, badge counters, loading states, and interactive buttons.

// Basic usage
Domma.effects.pulse('.badge');

// With configuration
const pulse = Domma.effects.pulse('.element', {
  scale: 1.05,        // Scale factor (1.05 = 5% larger)
  duration: 2000,     // Animation cycle time in ms
  stagger: 100,       // Delay between multiple elements
  pauseOnHover: true  // Pause when hovering
});

// Control methods
pulse.pause();
pulse.resume();
pulse.stop();
pulse.destroy();

Demo: Basic Pulse

Simple pulsing animation on badge elements.

Demo: Basic Pulse

Badge 1 Badge 2 Badge 3

<div class="demo-box" id="pulse-demo-1">
    <span class="badge badge-primary">Badge 1</span>
    <span class="badge badge-success">Badge 2</span>
    <span class="badge badge-danger">Badge 3</span>
</div>
<button type="button" class="btn btn-primary" id="pulse-start-1">Start</button>
<button type="button" class="btn btn-secondary" id="pulse-pause-1">Pause</button>
<button type="button" class="btn btn-secondary" id="pulse-resume-1">Resume</button>
<button type="button" class="btn btn-danger" id="pulse-stop-1">Stop</button>

/**
 * Demo: Basic Pulse - from public/showcase/effects/pulse.
 */
export function mount(root) {
        // Store control objects
    let pulse1, pulse2, pulse3;
        // pulse() Demo 1 - Basic
    $(root).find('#pulse-start-1').on('click', () => {
          if (pulse1) pulse1.destroy();
          pulse1 = Domma.effects.pulse('#pulse-demo-1 .badge', {
            scale: 1.1,
            duration: 2000,
            stagger: 100,
            respectMotionPreference: false
          });
        });
    $(root).find('#pulse-pause-1').on('click', () => {
          if (pulse1) pulse1.pause();
        });
    $(root).find('#pulse-resume-1').on('click', () => {
          if (pulse1) pulse1.resume();
        });
    $(root).find('#pulse-stop-1').on('click', () => {
          if (pulse1) {
            pulse1.stop();
            pulse1 = null;
          }
        });
}

Domma.effects.pulse('#pulse-demo-1 .badge', {
  scale: 1.1,
  duration: 2000,
  stagger: 100
});

Demo: Scale Variations

Different scale factors for varying intensity.

Demo: Scale Variations

Subtle (3%)

Medium (10%)

Bold (20%)

<div class="demo-box" id="pulse-demo-2">
    <div class="demo-item" data-scale="1.03">Subtle (3%)</div>
    <div class="demo-item" data-scale="1.1">Medium (10%)</div>
    <div class="demo-item" data-scale="1.2">Bold (20%)</div>
</div>
<button type="button" class="btn btn-primary" id="pulse-start-2">Start Variations</button>

/**
 * Demo: Scale Variations - from public/showcase/effects/pulse.
 */
export function mount(root) {
        // Store control objects
    let pulse1, pulse2, pulse3;
        // pulse() Demo 2 - Scale Variations
    $(root).find('#pulse-start-2').on('click', () => {
          if (pulse2) pulse2.destroy();

          // Apply different scales to each item
          $('#pulse-demo-2 .demo-item').each(function() {
            const scale = parseFloat($(this).attr('data-scale')) || 1.05;
            Domma.effects.pulse(this, {
              scale: scale,
              duration: 2000,
              respectMotionPreference: false
            });
          });
        });
}

// Apply different scales to each item
$('#pulse-demo-2 .demo-item').each(function() {
  const scale = parseFloat($(this).attr('data-scale')) || 1.05;
  Domma.effects.pulse(this, {
    scale: scale,
    duration: 2000
  });
});

Demo: Notification Dot

A pulsing notification indicator.

Demo: Notification Dot

<div style="position: relative; display: inline-block;">
    <span data-icon="bell" data-icon-size="48"></span>
    <span id="notification-dot" style="position: absolute; top: 0; right: -4px; width: 16px; height: 16px; background: #dc3545; border: 2px solid white; border-radius: 50%;"></span>
</div>
<button type="button" class="btn btn-primary" id="pulse-start-3">Start Notification Pulse</button>

/**
 * Demo: Notification Dot - from public/showcase/effects/pulse.
 */
export function mount(root) {
        // Store control objects
    let pulse1, pulse2, pulse3;
        // pulse() Demo 3 - Notification Dot
    $(root).find('#pulse-start-3').on('click', () => {
          if (pulse3) pulse3.destroy();
          pulse3 = Domma.effects.pulse('#notification-dot', {
            scale: 1.3,
            duration: 1500,
            respectMotionPreference: false
          });
        });
}

Domma.effects.pulse('#notification-dot', {
  scale: 1.3,
  duration: 1500
});