​​Framer Motion

Кто не любит плавную анимацию? Они делают наши пользовательские интерфейсы более живыми и естественными. Но как только мы пытаемся создать что-то более сложное, чем могут быть достигнуты с помощью базовых переходов и ключевых кадров CSS, это становится утомительным. Так быть не всегда, особенно с современными инструментами и библиотеками, такими как Framer Motion.

Установка: npm install framer-motion

#lib #ui #animation #документация

Создание сложных анимаций в React с помощью Framer Motion

Читать статью

#ui #animation #tutorial #lib

Animate an SVG viewBox with React

В этом посте автор будет анимировать комикс с помощью новой версии Popmotion, которая представляет собой универсальную библиотеку анимации, а также Framer Motion, который построен на основе Popmotion и специфичен для React.

[Popmotion]: popmotion.io
[Framer Motion]: www.framer.com/motion/

~~~~~~~~~
#tutorial #animation #lib #react #en
@react_it

Page Transitions In React

Переходы страниц в React с помощью Framer Motion

[Статья]: dev.to/joserfelix/page-transitions-in-react-1c8g

~~~~~~~~~~
🇺🇸 #tutorial #framer #react #animation #ui #en
@react_it

React Infinite Scrolling

В этом посте мы сделаем http-запрос к OpenLibrary и получим названия книг, соответствующих запросу. Затем эти результаты будут разбиты на страницы и отображены. Следующий пакет документов будет получен после того, как пользователь перейдет к окончательному документу, то есть когда он отобразится на экране.

[Статья]: dev.to/ca513zn/react-infinite-scrolling-2ndh

~~~~~~~~~~
🇺🇸 #tutorial #scroll #react #animation #ui #en
@react_it