---
title: "Number Counter"
url: "https://sanyam.sh/lab/number-counter"
date: "2025-12-22"
---

# Number Counter

animated number counter with directional slide transitions using Framer Motion's AnimatePresence.

key insight: using `useRef` to track direction (1 for increment, -1 for decrement) and passing it as `custom` prop to control enter/exit animations. the `mode='popLayout'` prevents layout shift during transitions.

variants handle y-axis movement based on direction - numbers slide up when incrementing and down when decrementing. `tabular-nums` ensures consistent width for smooth transitions.

- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/number-counter/index.tsx