applyShakeEffect function exported

Last updated: 2026-03-05T10:53:28.862Z

Metrics

LOC: 37 Complexity: 7 Params: 3

Signature

applyShakeEffect( target: Element | null, config: ShakeEffect, ): : Promise<void>

Summary

Applies the shake effect to target and resolves when animation ends.

Source Code

export function applyShakeEffect(
  target: Element | null,
  config: ShakeEffect,
): Promise<void> {
  return new Promise((resolve) => {
    if (!target || !(target instanceof HTMLElement)) {
      resolve();
      return;
    }

    const intensity = config.intensity ?? 3;
    const duration = config.duration ?? 500;
    const stepDuration = duration / (intensity * 2);

    const prevTransition = target.style.transition;
    target.style.transition = `transform ${stepDuration}ms ease`;

    let step = 0;
    const totalSteps = intensity * 2;
    const amplitude = 8;

    const tick = () => {
      if (step >= totalSteps) {
        target.style.transform = "";
        target.style.transition = prevTransition;
        resolve();
        return;
      }
      const dir = step % 2 === 0 ? amplitude : -amplitude;
      target.style.transform = `translateX(${dir}px)`;
      step++;
      setTimeout(tick, stepDuration);
    };

    tick();
  });
}

Dependencies (Outgoing)

graph LR applyShakeEffect["applyShakeEffect"] ShakeEffect["ShakeEffect"] applyShakeEffect -->|uses| ShakeEffect style applyShakeEffect fill:#dbeafe,stroke:#2563eb,stroke-width:2px click applyShakeEffect "72ddf7c2c41fe8d9.html" click ShakeEffect "ec9e2b2bf308ba04.html"
TargetType
ShakeEffect uses

Impact (Incoming)

graph LR applyShakeEffect["applyShakeEffect"] resolveTarget["resolveTarget"] applyEffect["applyEffect"] resolveTarget -->|uses| applyShakeEffect applyEffect -->|calls| applyShakeEffect style applyShakeEffect fill:#dbeafe,stroke:#2563eb,stroke-width:2px click applyShakeEffect "72ddf7c2c41fe8d9.html" click resolveTarget "cefe589bdbdd3b3b.html" click applyEffect "baf0d9f2a6803bb4.html"
SourceType
resolveTarget uses
applyEffect calls