Анимации с Framer Motion Framer Motion — популярная библиотека для… — Frontender Libs - обзор библиотек JS / CSS

Frontender Libs - обзор библиотек JS / CSS@sWebDev · 7.6K subscribers Open in TelegramOpen

Анимации с Framer Motion

Framer Motion — популярная библиотека для React, которая упрощает создание плавных анимаций. С её помощью можно легко добавлять интерактивные эффекты, такие как масштабирование кнопки при наведении или анимация появления элемента.

import { motion } from 'framer-motion';

const Button: React.FC = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }} // Анимация при наведении курсора
      whileTap={{ scale: 0.9 }} // Анимация при клике
      initial={{ opacity: 0 }} // Начальное состояние
      animate={{ opacity: 1 }} // Конечное состояние
      transition={{ duration: 0.3 }} // Длительность
    >
      Нажми меня
    </motion.button>
  );
};

export default Button;