Создание реалистичной анимации складывания с помощью Framer Motion

В этом видео мы воссоздадим дизайн, на который я наткнулся в Твиттере, где Сэм создал этот прекрасный складной компонент карты. Мы воспользуемся Framer Motion, чтобы воссоздать тот же результат с минимальными усилиями!

Обязательно ознакомьтесь с живой площадкой для разработки по ссылке ниже, чтобы получить код и поэкспериментировать с картой самостоятельно!

ССЫЛКИ:
Код и живая площадка для разработки: https://www.frontend.fyi/v/making-a-f...
Твит Сэма: https://x.com/samdape/status/17998436...

ДАЛЬШЕ?
📈 Если вам нужно больше подобного контента, станьте Frontend FYI PRO и получите доступ к моим текущим и всем будущим курсам за единоразовую покупку: https://fe.fyi/pro
📺 Если хотите больше подобных видео, посетите мой сайт: https://fe.fyi/videos
✉️ Подпишитесь на мою рассылку: https://fe.fyi/newsletter

МОИ СОЦИАЛЬНЫЕ СЕТЯ
🌍 Мой сайт – https://www.frontend.fyi
🐦 Twitter –   / jeroenreumkens  
📸 Instagram –   / jeroenreumkens  
💼 Linkedin –   / jeroenreumkens  

СОТРУДНИЧЕСТВО
Хотите вместе работать над созданием контента? Свяжитесь со мной по адресу jeroen [at] frontend.fyi

КТО Я?
Если вы впервые на этом канале — привет, меня зовут Йерун. Я фронтенд-инженер с почти 15-летним опытом работы, который в 2023 году решил перестать преподавать только в своих близких колледжах, чтобы начать обучать весь мир. То, что я преподаю, некоторые называют инженерным проектированием, я предпочитаю называть это ремеслом фронтенда.

ТАЙМ-КОДЫ:
00:00 – Вступление
00:30 – Начальная точка
01:30 – Добавление трёхколоночного макета
02:13 – Добавление изображения карты
03:30 – Перекрытие разделов карты
04:12 – Объяснение подхода к добавлению перетаскивания
05:04 – Добавление перетаскиваемого div
07:30 – Ограничение расстояния перетаскивания
08:25 – Преобразование расстояния перетаскивания в CSS-преобразование карты
10:30 – Предотвращение перемещения области перетаскивания при перетаскивании
11:18 – Масштабирование центральной части карты при развёртывании
12:17 – Добавление тени к центральной части
13:53 – Наклон карты для реалистичности
15:25 – Добавление линий сгиба на карту
15:56 – Добавление теней для ещё большего реализма
17:28 – Автоматическое открытие карты при прекращении перетаскивания
18:34 – Добавление подпрыгивания при открытии карты (с использованием движения (варианты)
20:26 – Добавьте текст, который будет появляться при открытии карты
21:22 – Заключение

#framermotion #webdevelopment #frontend