Animated Power-Up Button

This is an Animated Power-Up Button. It replaces standard interaction states with a visually rich, multi-layered animation sequence. Upon clicking, the button rotates, and a series of semi-transparent shadow layers stagger-in behind it, creating a “motion blur” or “power-up” trail effect. Its function is to provide highly stylized feedback for high-impact actions.

Specs

• Weight: ~35 KB (GSAP dependency).
• Performance: High. Uses GSAP to handle the coordination of multiple independent tweens, ensuring the animations stay perfectly synchronized without layout thrashing.
• Theming / Customization: Core visual states are managed via CSS classes for the shadows and the main button.
• Responsiveness: Static base (fixed dimensions), but uses relative em units for internal layout to maintain proportion if font scaling is applied.
• Graceful Degradation: The button remains interactive even if JS fails (via native :active states), though the advanced shadow-trail animation will be absent.

Anatomy

The component uses a “stacking proxy” pattern to achieve the trail effect.

• HTML (The Skeleton): The .switch container wraps six identical .shadow elements, followed by the .rotate element (the physical button face) and the .content (the “POWER UP” text).
• CSS (The Skin): Sets up absolute positioning for all layers so they sit on top of each other. Each shadow has a unique rotational offset, allowing them to fan out when they appear.
• JS (The Nervous System): GSAP initializes six independent timelines (one for each shadow) and a master toggle timeline. The master timeline watches the rotation of the button and triggers the individual shadow animations (restart()) as the button hits specific rotational thresholds.

Logic

The core interaction logic relies on “Rotational Threshold Triggering”:

onUpdate: function () {
  const rotateValue = gsap.getProperty(".rotate", "rotate");
  if (rotateValue > 15 && rotateValue < 30 && !shadow2.isActive()) {
    shadow2.restart();
  }
  // ... repeated for each shadow layer
}

Instead of simply firing all shadow animations at once, the script uses GSAP’s onUpdate callback to “poll” the current rotation of the button. As the button rotates, it hits predefined thresholds (e.g., 15 degrees, 30 degrees). Once a threshold is crossed, the script checks if the corresponding shadow animation is already running; if not, it triggers the restart. This creates a beautifully staggered, sequence-based trail that follows the button’s physical rotation.

Feel

Satisfying and “weighted.” The rotation feels like a heavy dial turning, and the way the shadows fan out creates the illusion of speed or energy accumulation. The “Power Up” text, combined with the golden-yellow button and the shifting shadow trail, provides a distinct sense of accomplishment and visual flair to a simple click event.