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