Triggering Animations

Ready, click, go

Here we go… motion without a trigger is just decoration.
Triggering is where animation becomes interactive, purposeful, and context-aware.

This page covers the essentials:
Classes → Events → Scroll → Intersection → Play/Pause control.

---

🎛 Triggering with Classes (The Classic)

Still the cleanest approach: toggle a class, fire an animation.

.card {
  animation: fadeUp 500ms ease-out forwards;
  opacity: 0;
}

.card.reveal {
  opacity: 1;
}

card.classList.add('reveal');

Simple. Direct. No magic.

---

🖱 Event-Driven Animation (Clicks, Hovers, Presses)

button.addEventListener('click', () => {
  button.classList.add('activate');
});

This is perfect for:

• button click feedback
• panel reveals
• navigation transitions
• “press and hold” moments (paired with direction/play-state)

---

🌀 Restarting an Animation

If we need to rerun an animation:

el.classList.remove('run');
void el.offsetWidth; /* Force reflow */
el.classList.add('run');

Browser jutsu. Works every time.

---

📜 Scroll-Triggered Animations

window.addEventListener('scroll', () => {
  const top = el.getBoundingClientRect().top;
  if (top < window.innerHeight * 0.8) {
    el.classList.add('enter');
  }
});

Lightweight. Reliable.
A great bridge to intersection observers.

---

⏯ Play & Pause with animation-play-state

.runner {
  animation: slide 2s linear infinite;
}

.runner.paused {
  animation-play-state: paused;
}

runner.classList.add('paused');
runner.classList.remove('paused');

Perfect for:

• scroll-controlled sequences
• hold-to-activate behaviors
• drag interactions
• toggled looping animations

---

🐾 Annie’s Trigger Lab

Hover or click each zone to trigger Annie — same motion, different triggers.

Hover (Class Toggle)

Click Me

Click (Event → Add Class)

Play / Pause

animation-play-state

---

➡️ Next page: Performance & Best Practices — GPU-friendly motion, avoid jank, and know when to say no.