AnimatedStats lets you display impressive numbers and metrics with polished count-up animation. Use it for growth numbers, revenue, users, views, clients, conversion rates, years of experience, completed projects, or any other key statistic. Each stat can include a label, animated number, prefix, suffix, description, custom timing, and optional highlight styling.
Supports one or multiple stat items with editable label, start value, end value, prefix, suffix, decimal places, description, custom duration, custom delay, and highlight toggle. Numbers animate from start to end when the stat enters the viewport. Includes easing options: linear, ease-out cubic, ease-out quart, and ease-in-out cubic. Supports number stagger delay across multiple stats, trigger threshold, trigger once or replay behavior, and animation enable/disable control. Prefixes and suffixes can animate separately using fade-up, mask, blur, or scale reveal styles. Description text can reveal by word or letter, also using fade-up, mask, blur, or scale animation. Description and affix reveal timing can happen immediately or after the number finishes counting. Includes decimal place control, default decimals, optional thousands separators, affix scale, and affix spacing. Layout supports fit or fill sizing, desktop and tablet column controls, mobile single-column behavior, left/center/right alignment, optional stat cards, card background, card border, card radius, padding, gap, max width, component background, component radius, and component padding. Typography controls include separate number and description fonts, number size, description size, responsive scaling with frame size, number color, prefix/suffix color, and description color. Respects Framer static rendering, disabled animations, and users who prefer reduced motion.
AnimatedStats lets you display impressive numbers and metrics with polished count-up animation. Use it for growth numbers, revenue, users, views, clients, conversion rates, years of experience, completed projects, or any other key statistic. Each stat can include a label, animated number, prefix, suffix, description, custom timing, and optional highlight styling.
Supports one or multiple stat items with editable label, start value, end value, prefix, suffix, decimal places, description, custom duration, custom delay, and highlight toggle. Numbers animate from start to end when the stat enters the viewport. Includes easing options: linear, ease-out cubic, ease-out quart, and ease-in-out cubic. Supports number stagger delay across multiple stats, trigger threshold, trigger once or replay behavior, and animation enable/disable control. Prefixes and suffixes can animate separately using fade-up, mask, blur, or scale reveal styles. Description text can reveal by word or letter, also using fade-up, mask, blur, or scale animation. Description and affix reveal timing can happen immediately or after the number finishes counting. Includes decimal place control, default decimals, optional thousands separators, affix scale, and affix spacing. Layout supports fit or fill sizing, desktop and tablet column controls, mobile single-column behavior, left/center/right alignment, optional stat cards, card background, card border, card radius, padding, gap, max width, component background, component radius, and component padding. Typography controls include separate number and description fonts, number size, description size, responsive scaling with frame size, number color, prefix/suffix color, and description color. Respects Framer static rendering, disabled animations, and users who prefer reduced motion.
Spyridon Merkouris
