React без анимации? Узнай, как Motion оживит твои проекты!
React: Оживляем проекты с Motion — плавная анимация за пару шагов! 👉 React - Плавная анимация с Motion 👉 Добавляем динамику и стиль в проекты 👉 Полное руководство (Часть 10) Сегодня мы продолжаем работу над портфолио на React! В этом уроке я покажу, как использовать библиотеку Motion для создания плавной и стильной анимации. Вы узнаете, как подключить Motion, настроить базовые анимации и интегрировать их в свои компоненты. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Что вас ждёт в этом видео: 🔧 Подключение библиотеки Motion: Устанавливаем библиотеку и подключаем её к проекту. 🎨 Создание анимации в React: Добавляем плавные эффекты и оживляем интерфейс. 🛠️ Работа с настройками Motion: Научимся управлять временем, траекториями и другими параметрами анимации. 🚀 Оптимизация кода: Организуем анимации так, чтобы их легко было масштабировать в будущем. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Полезные ссылки: 🛠️ Motion - Официальный сайт библиотеки: https://motion.dev/
(Учитесь добавлять потрясающую анимацию в свои проекты.) 🌐 Netlify - Хостинг для ваших проектов: https://www.netlify.com/
(Быстрое и удобное развёртывание React-проектов.) 🌟 GitHub Репозиторий: https://github.com/Ilya-Stoyanov/reac...
(Здесь вы найдёте код урока, а также готовые примеры.) 🚀 Курс по вёрстке: https://frontend-courses.com/
(Изучайте основы и продвинутую вёрстку.) 💈 Присоединяйтесь к Telegram-каналу: https://t.me/ilya_stoyanov
(Будьте в курсе новых уроков и обновлений.) ⏱️ Таймкоды: 01:05 — Подключаем библиотеку Motion в React для анимации 01:35 — Добавляем плавную анимацию в секцию Home с помощью Motion 05:35 — Разбираем свойства анимации в Motion: время, траектория и эффекты 07:05 — Выносим анимацию в отдельный файл для переиспользования 09:00 — Импортируем анимированную функцию в компонент Home 18:07 — Создаём универсальную функцию для анимации в React 23:06 — Импорт универсальной функции анимации в секцию Home 27:20 — Добавляем анимацию в секцию About Me с помощью Motion 31:24 — Создаём файл Custom List для управления анимацией списков 35:11 — Добавляем анимацию для заголовков секций 40:58 — Пример работ для следующего видео 👍 Спасибо, что досмотрели до конца! Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить ещё больше полезных материалов по созданию и вёрстке сайтов! 💜
