The shake() effect applies a quick shake animation to draw attention or signal an error. Supports horizontal, vertical, and both directions with configurable intensity and iterations.

// Shake an invalid input
Domma.effects.shake('#email-input');

// Vertical shake with callback
Domma.effects.shake('.alert', {
  direction: 'vertical',
  intensity: 4,
  iterations: 2,
  onComplete: () => console.log('Shake done')
});

// Intense shake
Domma.effects.shake('.error-box', {
  intensity: 12,
  duration: 800,
  direction: 'both'
});

Three shake directions: horizontal, vertical, and both axes simultaneously.

Domma.effects.shake('#el', { direction: 'horizontal' }); // Default
Domma.effects.shake('#el', { direction: 'vertical' });
Domma.effects.shake('#el', { direction: 'both' });

Different shake intensities from subtle to extreme.

Domma.effects.shake('#el', { intensity: 2 });   // Subtle
Domma.effects.shake('#el', { intensity: 6 });   // Normal (default)
Domma.effects.shake('#el', { intensity: 12 });  // Intense

Shake invalid form inputs to draw attention. Try submitting with an empty or invalid email.

$('#submit').on('click', () => {
  const email = $('#email').val();
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  if (!isValid) {
    $('#email').addClass('invalid');
    Domma.effects.shake('#email', {
      intensity: 4,
      duration: 400,
      onComplete: () => {
        // Remove invalid state after delay
        setTimeout(() => $('#email').removeClass('invalid'), 2000);
      }
    });
  }
});

Repeat the shake cycle multiple times for persistent emphasis.

Domma.effects.shake('#el', { iterations: 1 }); // Default
Domma.effects.shake('#el', { iterations: 2 });
Domma.effects.shake('#el', { iterations: 3 });

Shake multiple elements with a cascading delay.

Domma.effects.shake('.item', {
  stagger: 100,
  intensity: 5,
  direction: 'horizontal'
});