Rating stars fill left to right with a small pop and stop on the real rating (4.9 leaves the last star 90% full).
Use it for: Everyone with a strong Google rating: trades, cleaners, salons, restaurants. Put it near the first call button. When: A real rating (4.5+) and review count, plus 2-3 short real reviews. Don't: Ratings below 4.3, numbers not from the live profile, or stars on every review card animating forever. How: Each star is an empty and a filled SVG; the filled one is clipped to the right amount (--c). GSAP tweens the clip and a back-out pop. The final state is in the HTML. Weight: 1.2 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 KB gzipped (shared by every effect on the page). Plugins: none (core only).
Scroll ↓
4.9
from 1,284 Google reviews
"Showed up at 11 pm on a Sunday, fixed the burst line and mopped up after himself."
Dana R., Elm Park
"Quoted on the phone, same price on the invoice. That never happens."