Створення мікроанімацій елементів інтерфейсу сайту

Створення мікроанімацій елементів інтерфейсу

Мікроанімації — це зоротна зв'язок на рівні окремих елементів: натиснута кнопка, завантажений список, перемикнений тоггл, з'явленое сповіщення. Вони роблять інтерфейс «живим» і знижують когнітивне навантаження: користувачи бачать, що їхня дія зареєстрована.

Принципи

Тривалість. Мікроанімації — 100–300ms. Повільніше — дразнить. Швидше — непомітно. Виключення: анімації з фізичним змістом (spring-ефект, inertia) можуть бути довшими.

Easing. ease-out для появи (швидкий старт, плавне гальмування — імітує реальні об'єкти). ease-in для зникнення. spring для інтерактивних елементів.

Не анімуйте те, що не змінилося. Якщо користувач клацає кнопку і логічно нічого не змінилось — анімація бреше.

Кнопки

Найпоширеніша мікроанімація. Три рівні:

Тільки CSS (hover + active):

.btn {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Стан завантаження (кнопка зі спіннером):

const Button: React.FC<ButtonProps> = ({ children, onClick, loading }) => {
  return (
    <button
      onClick={onClick}
      disabled={loading}
      className={`btn ${loading ? 'btn--loading' : ''}`}
    >
      <AnimatePresence mode="wait">
        {loading ? (
          <motion.span
            key="spinner"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ duration: 0.15 }}
          >
            <SpinnerIcon />
          </motion.span>
        ) : (
          <motion.span
            key="label"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            {children}
          </motion.span>
        )}
      </AnimatePresence>
    </button>
  );
};

Стан успіху (кнопка → галочка → текст «Збережено»):

type BtnState = 'idle' | 'loading' | 'success';

const SaveButton: React.FC = () => {
  const [state, setState] = useState<BtnState>('idle');

  const handleClick = async () => {
    setState('loading');
    await saveData();
    setState('success');
    setTimeout(() => setState('idle'), 2000);
  };

  return (
    <motion.button
      onClick={handleClick}
      animate={state === 'success' ? { backgroundColor: '#22c55e' } : {}}
      transition={{ duration: 0.3 }}
    >
      {state === 'idle'    && 'Зберегти'}
      {state === 'loading' && <Spinner />}
      {state === 'success' && <><CheckIcon /> Збережено</>}
    </motion.button>
  );
};

Форма: з'явлення помилок та успіху

// Поле з анімованою помилкою
const FormField: React.FC<{ error?: string }> = ({ error, ...props }) => (
  <div className="field">
    <input {...props} className={error ? 'input--error' : ''} />
    <AnimatePresence>
      {error && (
        <motion.p
          key="error"
          initial={{ opacity: 0, y: -4, height: 0 }}
          animate={{ opacity: 1, y: 0,  height: 'auto' }}
          exit={{ opacity: 0,   y: -4,  height: 0 }}
          transition={{ duration: 0.2 }}
          className="field__error"
        >
          {error}
        </motion.p>
      )}
    </AnimatePresence>
  </div>
);

Shake-анімація при невірному submit:

const shakeVariants = {
  idle:  { x: 0 },
  shake: { x: [0, -10, 10, -8, 8, -4, 4, 0] },
};

<motion.form
  variants={shakeVariants}
  animate={hasErrors ? 'shake' : 'idle'}
  transition={{ duration: 0.5, ease: 'easeInOut' }}
>

Тоггл / Чекбокс

const Toggle: React.FC<{ checked: boolean; onChange: () => void }> = ({ checked, onChange }) => (
  <button
    role="switch"
    aria-checked={checked}
    onClick={onChange}
    className="toggle"
  >
    <motion.div
      className="toggle__thumb"
      animate={{ x: checked ? 20 : 0 }}
      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
    />
  </button>
);

Spring-перехід (stiffness: 500, damping: 30) дає фізично правдоподібний рух з легким відскоком.

Список: з'явлення елементів

const listVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.05 } },
};

const itemVariants = {
  hidden:  { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
};

const AnimatedList: React.FC<{ items: Item[] }> = ({ items }) => (
  <motion.ul
    variants={listVariants}
    initial="hidden"
    animate="visible"
  >
    {items.map(item => (
      <motion.li key={item.id} variants={itemVariants}>
        <ItemCard item={item} />
      </motion.li>
    ))}
  </motion.ul>
);

staggerChildren: 0.05 — кожний наступний елемент з'являється з затримкою 50ms. Для 20 елементів — весь список розкривається за 1 секунду, сприймається як гладкий каскад.

Toast-сповіщення

const ToastNotification: React.FC<{ message: string; type: 'success' | 'error' }> = ({ message, type }) => (
  <motion.div
    className={`toast toast--${type}`}
    initial={{ opacity: 0, y: 50, scale: 0.9 }}
    animate={{ opacity: 1, y: 0,  scale: 1 }}
    exit={{ opacity: 0, y: 20, scale: 0.95, transition: { duration: 0.15 } }}
    transition={{ type: 'spring', stiffness: 400, damping: 25 }}
  >
    {type === 'success' ? <CheckCircleIcon /> : <AlertIcon />}
    <span>{message}</span>
  </motion.div>
);

Toast з'являється знизу-вгору зі spring-ефектом та виходить швидко (duration: 0.15) — важливо, вихід повинен бути швидшим за появу.

Число з анімацією інкременту

Для лічильників, статистики, кошика:

const AnimatedNumber: React.FC<{ value: number }> = ({ value }) => {
  const spring = useSpring(value, { stiffness: 100, damping: 30 });
  const display = useTransform(spring, Math.round);

  return <motion.span>{display}</motion.span>;
};

Число «накручується» до нового значення фізично плавно.

Курсорні ефекти (Spotlight, Magnetic)

// Magnetic button — тягнеться до курсору
const MagneticButton: React.FC<ButtonProps> = ({ children }) => {
  const ref = useRef<HTMLButtonElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = ref.current!.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    x.set((e.clientX - centerX) * 0.3);
    y.set((e.clientY - centerY) * 0.3);
  };

  const handleMouseLeave = () => { x.set(0); y.set(0); };

  return (
    <motion.button
      ref={ref}
      style={{ x, y }}
      transition={{ type: 'spring', stiffness: 200, damping: 15 }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </motion.button>
  );
};

Продуктивність

Ви можете анімувати тільки transform та opacity — ці властивості не викликають reflow. Анімація width, height, top, left псує FPS:

/* Погано */
.card { transition: width 300ms; }

/* Добре */
.card { transition: transform 300ms; }
.card:hover { transform: scaleX(1.05); }

У framer-motion layout prop автоматично анімує зміну розмірів через FLIP-техніку (спочатку вимірює кінцевий стан, потім анімує transform від початку до кінця).

Часові рамки