Playful Multi-Step Interaction

This Playful Multi-Step Interaction transforms a boring confirmation dialog into a delightful conversation. It guides the user through a short “chat” with a friendly avatar, using smooth animations and instant feedback. This pattern is perfect for onboarding flows, feedback forms, or any interface that benefits from a human touch, proving that standard interactions can be both functional and fun.

Core Technique

The logic combines classic DOM manipulation with modern Web Animations API (WAAPI) and rigorous accessibility practices.

1. State Flow: JavaScript manages the visibility of sections (steps) by toggling .hidden classes and updating aria-hidden attributes. This ensures screen readers ignore hidden content.
2. WAAPI for Motion: Instead of CSS keyframes, the script uses element.animate() for the “wiggle” effect on the “No” button and the cookie hover. This keeps the animation logic coupled with the event interaction.
3. Focus Management: When moving between steps (yes1.addEventListener), the script manually sets focus to the next relevant button (yes2.focus()). This is critical for keyboard users so they don’t get “lost” when the DOM changes.

yes1.addEventListener("click", () => {
  // Hide current, show next
  hide(resp1);
  show(step2);
  
  // Accessibility: Inform assistive tech
  yes1.setAttribute("aria-expanded", "true");
  
  // Manage focus flow
  setTimeout(() => yes2.focus(), 120);
});

Customization

The style relies on CSS variables, making re-theming trivial. You can change the avatar or colors in the :root.

:root {
  /* Change theme colors */
  --bg: #0f1724; 
  --accent: #ffcc33; /* Button Yellow */
}

/* Change the avatar image/emoji in HTML */
<div class="avatar">🤖</div>

To modify the “wiggle” intensity, adjust the keyframes array in the JavaScript no1.animate() call.

no1.animate([
  { transform: "translateX(0)" },
  { transform: "translateX(-10px)" }, // Stronger shake
  { transform: "translateX(10px)" },
  { transform: "translateX(0)" }
], { duration: 300 });

Tips

1. ARIA-Live Regions: The response divs (#resp1, #resp2) use role="status" and aria-live="polite". This is a best practice for dynamic text updates. It tells the screen reader to announce the new text (“Ooh that’s too bad”) without interrupting the user instantly.

2. Animation Reset Hack: In the final step, you’ll see void cookieEmoji.offsetWidth;. This forces a browser reflow, allowing the CSS class .bounce to be removed and immediately re-added, effectively restarting the CSS animation.