Animated Star Toggle Switch

This is an Animated Star Toggle Switch. It replaces a standard HTML checkbox with a highly expressive, character-driven micro-interaction. Its function is to provide emotional feedback to a binary choice (like “favorite” or “bookmark”), launching the star into the air where it physically morphs between a sad, grey orb and a happy, bright yellow star.

Specs

• Weight: ~80 KB (GSAP Core dependency).
• Performance: High. The GSAP animations primarily target CSS custom properties (--y, --scale) and clip-path, ensuring hardware-accelerated transitions without heavy layout recalculations.
• Theming / Customization: Color states are managed via CSS variables (--color-default, --color-active). The star shape is drawn entirely using clip-path: polygon(), making it infinitely scalable.
• Responsiveness: Fixed size. The toggle is hardcoded to 40x40px, suited for inline icon placements.
• Graceful Degradation: Fails safely. The underlying <input type="checkbox"> manages the actual state. If JavaScript fails, clicking the star will instantly toggle its CSS color and facial expression, lacking only the jump animation.

Anatomy

The component uses a hidden input paired with a visual proxy.

• HTML (The Skeleton): A <label> wraps a hidden <input type="checkbox"> and the .icon container. The .star element and its nested .eye act as the character’s body.
• CSS (The Skin): Relies heavily on the :checked pseudo-class and the adjacent sibling combinator (+) to instantly swap CSS variables for colors and border-radius (the smile). clip-path handles the geometric morphing from a circle to a star.
• JS (The Nervous System): Intercepts the click event (e.preventDefault()) to manually orchestrate the jump. It uses a complex GSAP keyframe array to animate the Y-axis, scaling, and rotation, while toggling specific CSS classes (.star-round, .star-bottom) at precise moments to trigger the CSS clip-path morphs.

Logic

The animation’s fluidity relies on “Property Routing via CSS Variables”:

gsap.to(toggle, {
    keyframes:[{
        '--y': '-48px',
        duration: .3,
    }, {
        '--y': '68px',
        '--scale': .4,
        onStart() { toggle.classList.add('star-round') }
    }]
});

Instead of using GSAP to animate standard CSS properties directly (like transform: translateY(-48px)), the script animates custom CSS variables (--y, --scale). The CSS stylesheet then reads these rapidly changing variables and applies them to a combined transform rule: transform: translateY(var(--y)) rotate(var(--rotate)) scale(var(--scale));. This decouples the JS timeline from the CSS rendering, allowing multiple independent GSAP timelines (like the 360-degree rotation running simultaneously) to affect the same element without overriding each other’s transform matrices.

Feel

Bouncy, expressive, and tactile. The interaction feels like interacting with a physical toy. When clicked, the star winds up, leaps into the air, spins, and squashes heavily upon landing. The timing is immaculate; the transition from a dull, rounded ball to a sharp, glowing star happens at the exact apex of the jump, making the state change feel earned rather than instantaneous.