Реалізація анімації лічильників (Counter Animation) на сайті

Реалізація анімації счётчиків на сайті

Анімовані счётчики — числа, які "відраховуються" від нуля до цільового значення при появі в зоні видимості. Типове застосування: секція зі статистикою ("1500+ клієнтів", "99% uptime"). Реалізується через requestAnimationFrame з easing-функцією та IntersectionObserver для старту.

Базова реалізація через requestAnimationFrame

// hooks/useCounterAnimation.ts
import { useEffect, useRef, useState } from 'react'

interface CounterOptions {
  start?: number
  end: number
  duration?: number          // мс
  easing?: (t: number) => number
  decimals?: number
  onComplete?: () => void
}

// Стандартні easing-функції
export const easings = {
  linear: (t: number) => t,
  easeOut: (t: number) => 1 - Math.pow(1 - t, 3),
  easeInOut: (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
  easeOutExpo: (t: number) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
}

export function useCounterAnimation({
  start = 0,
  end,
  duration = 2000,
  easing = easings.easeOut,
  decimals = 0,
  onComplete,
}: CounterOptions) {
  const [value, setValue] = useState(start)
  const [isRunning, setIsRunning] = useState(false)
  const rafRef = useRef<number | null>(null)
  const startTimeRef = useRef<number | null>(null)

  const run = () => {
    if (isRunning) return
    setIsRunning(true)
    startTimeRef.current = null

    const animate = (timestamp: number) => {
      if (!startTimeRef.current) startTimeRef.current = timestamp

      const elapsed = timestamp - startTimeRef.current
      const progress = Math.min(elapsed / duration, 1)
      const easedProgress = easing(progress)
      const currentValue = start + (end - start) * easedProgress

      setValue(parseFloat(currentValue.toFixed(decimals)))

      if (progress < 1) {
        rafRef.current = requestAnimationFrame(animate)
      } else {
        setValue(end)
        setIsRunning(false)
        onComplete?.()
      }
    }

    rafRef.current = requestAnimationFrame(animate)
  }

  const reset = () => {
    if (rafRef.current) cancelAnimationFrame(rafRef.current)
    setValue(start)
    setIsRunning(false)
    startTimeRef.current = null
  }

  useEffect(() => {
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
    }
  }, [])

  return { value, run, reset, isRunning }
}

Компонент Counter з IntersectionObserver

// components/Counter.tsx
import { useEffect, useRef } from 'react'
import { useCounterAnimation, easings } from '../hooks/useCounterAnimation'

interface CounterProps {
  end: number
  start?: number
  duration?: number
  decimals?: number
  prefix?: string      // "$", "~"
  suffix?: string      // "+", "%", "K"
  separator?: string   // розділювач тисяч: " " або ","
  once?: boolean       // анімувати лише при першому появленні
  className?: string
}

export function Counter({
  end,
  start = 0,
  duration = 2000,
  decimals = 0,
  prefix = '',
  suffix = '',
  separator = '',
  once = true,
  className = '',
}: CounterProps) {
  const containerRef = useRef<HTMLSpanElement>(null)
  const hasAnimated = useRef(false)

  const { value, run } = useCounterAnimation({
    start,
    end,
    duration,
    decimals,
    easing: easings.easeOutExpo,
  })

  useEffect(() => {
    const el = containerRef.current
    if (!el) return

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (once && hasAnimated.current) return
          hasAnimated.current = true
          run()
          if (once) observer.unobserve(el)
        }
      },
      { threshold: 0.5 }
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const formatted = separator
    ? value.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, separator)
    : value.toFixed(decimals)

  return (
    <span ref={containerRef} className={className}>
      {prefix}{formatted}{suffix}
    </span>
  )
}

Секція статистики

// components/StatsSection.tsx
import { Counter } from './Counter'

const stats = [
  { value: 1500, suffix: '+', label: 'Клієнтів', duration: 2200 },
  { value: 99.9, suffix: '%', label: 'Uptime', decimals: 1, duration: 1800 },
  { value: 12, suffix: ' років', label: 'На ринку', duration: 1500 },
  { value: 47, prefix: '~', suffix: ' країн', label: 'Географія', duration: 2000 },
]

export function StatsSection() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="text-5xl font-bold text-blue-600 mb-2">
                <Counter
                  end={stat.value}
                  suffix={stat.suffix}
                  prefix={stat.prefix}
                  decimals={stat.decimals ?? 0}
                  duration={stat.duration}
                  separator=" "
                />
              </div>
              <p className="text-gray-600 font-medium">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

Форматування: великі числа та локаль

// utils/format-number.ts
export function formatNumber(
  value: number,
  options: Intl.NumberFormatOptions & { locale?: string } = {}
): string {
  const { locale = 'uk-UA', ...intlOptions } = options
  return new Intl.NumberFormat(locale, intlOptions).format(value)
}

// Використання в компоненті:
// formatNumber(1500000, { notation: 'compact' }) → "1,5 млн"
// formatNumber(99.9, { minimumFractionDigits: 1 }) → "99,9"

Типові терміни

Один счётчик зі стандартними налаштуваннями — 1–2 години. Секція зі статистикою, форматуванням та IntersectionObserver — 4–6 годин.