Elastic Animated Star Rating

This Elastic Animated Star Rating component turns a mundane feedback form into a delightful micro-interaction. Instead of simple color changes, the stars spring to life with a satisfying “elastic” pop when clicked. The animation logic handles both filling (bouncing in) and emptying (shrinking away) states, making the interaction feel physically responsive and engaging.

Core Technique

The animation relies heavily on GSAP (GreenSock) for its physics-based easing capabilities.

1. Star Construction: The stars are not standard SVG icons. They are built using CSS clip-path: polygon(...) on pseudo-elements (::before, ::after) inside a container. This allows for granular control over the shape’s parts during animation.
2. Elastic Animation: When a star is clicked, GSAP triggers a timeline. The active stars scale up from 0 to 1 using ease: 'elastic.out(1, 0.7)'. This specific easing function creates the wobbly, gelatinous bounce effect.
3. State Management: The script splits the stars into active (selected) and inactive (unselected) arrays based on the clicked index. It then reverses the active array to animate them in a staggered sequence, creating a wave-like motion from left to right.

Customization

You can tweak the “bounciness” and speed by modifying the GSAP configuration object within the click listener.

gsap.to(active.reverse(), {
    // ...
    keyframes: [{
        // ...
    }, {
        '--star-scale': 1,
        duration: 0.9, // Slower bounce
        ease: 'elastic.out(1, 0.3)', // More wobbles
        stagger: 0.1 // Slower wave
    }]
})

To change the star colors, simply update the CSS variables in the .rating class.

.rating {
    --default: #CCCCCC; /* Inactive grey */
    --active: #FF4500;  /* Active orange */
}

Tips

Clip-path vs SVG: This example uses clip-path on divs to create stars. While clever, this can be jagged on low-DPI screens. For production, consider using SVG <path> elements, which render crisper edges and are easier to animate smoothly across all devices.