Лучший анимированный лендинг на GSAP | Web Dev Challenge С3.Э5

Описание: Создайте целевую страницу, которая заставит всех остановиться и обратить на неё внимание.

Присоединяйтесь к хакатону: создайте свою собственную целевую страницу и выиграйте призы и подарки: https://codetv-gsap-cloud.webflow.io/

Время от времени какой-нибудь веб-сайт привлекает внимание всего интернета и становится предметом восхищения, подражания и изучения как отличный пример того, каким может быть интернет, если мы вкладываем в него душу.

Мы хотим, чтобы вы выложились на полную и создали целевую страницу, которая заставит зрителя остановиться и сказать: «Вау!» Целевая страница может быть посвящена чему угодно: вымышленному бизнесу, воображаемому продукту, материалу, который вы хотели бы видеть существующим, или чему-либо еще, что вас интересует.

Спонсор: Webflow (https://codetv.link/webflow)

Инструмент: GSAP

Ваше приложение должно использовать GSAP в процессе сборки.

GSAP — это библиотека анимации на JavaScript, которая содержит огромное количество инструментов и плагинов, позволяющих делать практически все, что вы можете себе представить на своем веб-сайте. Полный набор инструментов GSAP теперь доступен бесплатно благодаря поддержке Webflow.

Чтобы упростить развертывание ваших творений GSAP, Webflow Cloud позволяет развертывать любой репозиторий, включая полнофункциональные пользовательские приложения.

GSAP: https://gsap.com/
Стартовый репозиторий: https://github.com/webflow-examples/a...
Webflow Cloud: https://webflow.com/feature/cloud

РАЗРАБОТЧИКИ

Ключевые разработчики
Дэвид Хуришд   / davidkpiano  
Стивен Шоу https://shaw.city

Команда Osmo
Илья ван Эк   / ilja-van-eck  
Деннис Снелленберг   / dennissnellenberg  

Монетный двор США и Казначейство
Генри Десрош https://bsky.app/profile/strange.website

КОНСУЛЬТАНТЫ
Кэсси Эванс   / cassie-codes  
Джейсон Ленгсторф https://bsky.app/profile/jason.energy https://jason.energy/links

ПРИЛОЖЕНИЯ

Команда Osmo
сайт: https://osmo-world-cup-26.webflow.io/

Keyframers
исходный код: https://github.com/keyframers/landing...
сайт: https://lunarland.ing/

Монетный двор и Казначейство США
исходный код: https://github.com/xdesro/sell-your-soul
сайт: https://sell-your-soul.webflow.io/

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

Команда Osmo
сайт: https://lunarland.ing/

Монетный двор и Казначейство США*
исходный код: https://github.com/xdesro/sell-your-soul
сайт: https://sell-your-soul.webflow.io/

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

https://codetv.dev/support
----------------------------------------------------------------------

Разделы:
0:00 В этом эпизоде...
0:30 Приветствие + задание
0:44 Правила задания + необходимый инструмент + знакомство с вашим консультантом
2:00 Начало этапа планирования
2:40 Знакомство с разработчиками Keyframe + их идея приложения
4:15 Знакомство с командой Osmo + их идея приложения
6:25 Знакомство с Монетным двором и Казначейством США + их идея приложения
8:25 Консультанты высказывают свое мнение о планах
9:13 Начало этапа разработки
10:23 Проверка прогресса
16:10 Проверка на позднем этапе
19:10 Присоединяйтесь к хакатону Webflow + GSAP!

19:45 Демонстрация сайта команды Osmo
23:13 Демонстрация сайта Монетного двора и Казначейства США
25:25 Демонстрация сайта Keyframer
28:05 Размышления о задании
29:31 Неудачные дубли и титры