Google Fit Rings Animation

The interaction showcases Google Fit's activity rings. Upon activation, the dual progress rings (representing Heart Points and Steps) draw in clockwise while the central numbers count up dynamically. Tapping the rings triggers a smooth transition where the outer rings collapse into a single green arc that morphs into a central heart-arrow icon, while the background content fades out. Tapping again reverses the animation, morphing the icon back into the dual progress rings and counting numbers with a fluid, organic feel.