Мэтт Перри из Framer и я изучаем библиотеку анимации React Framer Motion.
Во-первых, мы посмотрим, насколько прост API. Вы контролируете все очень декларативно через свойства элементов в вашем JSX. Управление анимацией на этом уровне очень интуитивно понятно и значимым образом связано с пользовательским интерфейсом и состоянием.
Каждый пример, который мы рассматриваем, более реален и включает в себя больше возможностей того, на что способен Framer Motion. Разработчикам React понравится синтаксис всего этого, а всем остальным понравятся невероятно производительные и плавные результаты.
Мы заканчиваем рассмотрение самого Framer, который использует эту точную библиотеку для внутренних целей, чтобы делать все, что делает Framer с анимацией. Заинтригован Framer? Загрузите Framer X.
Демонстрация 1: Базовый синтаксис
Демо 2: Варианты
Демонстрация 3: AnimatePresence и layoutTransition
Бонус: проверьте функцию «прокрутите, чтобы закрыть» во всплывающем окне с изображением.