Скачать или смотреть Сложные временные рамки GSAP и ценности, основанные на функциях

Давайте пересоберем анимацию загрузки с сайта дня Awwwards (SOTD) от 13 октября 2022 г. — Spotify Astrology Club. Эта сборка расширит ваши знания о более сложных понятиях, таких как:
Контур обрезки для сплошной заливки круга. Контекст наложения элементов (когда нельзя использовать z-index).
Связь между абсолютным положением и высотой и её влияние на направление анимации.
Сложные, длинные и связанные временные шкалы GSAP.
Передача значений функций в свойства GSAP, которые мы будем анимировать.
Принудительное сохранение одной анимации (времени загрузки) с той же длительностью, что и второй, параллельной анимации. - Анимация счётчика с помощью свойства snap GSAP

// КЛОНИРУЙТЕ
👯‍♂️ https://try.webflow.com/cloneable-is-...

// РЕСУРСЫ
🌶 Code Boost: https://www.webbae.net/code-boosts/co...
🎼 Spotify Astrology SOTD: https://www.awwwards.com/sites/spotif...
⚫️ makemepulse: https://www.makemepulse.com/

// Скидка GSAP
🎢 Получите 10% на GSAP: WEBBAE10
♣️ Creative Coding Club (мои любимые уроки GSAP): https://www.creativecodingclub.com/bu...

// БЕСПЛАТНЫЕ ресурсы
✂️ Библиотека фрагментов кода: https://code-snippets-sign-up.webflow...
🤝 CSS, о котором вам никто не рассказывал: https://www.webbae.net/css-nobody-tol...
🚗 План изучения Webflow: https://www.webbae.net/roadmap-to-lea...

// Премиум-контент
🤝 Patreon:   / webbae  
🕸️ Продвинутый курс Webflow (201): https://www.webbae.net/product/webflo...

// Присоединяйтесь
🙋‍♀️ Присоединяйтесь к Discord:   / discord  
🐥 Подписывайтесь!   / webisbae  

// ОБСУЖДАЕМЫЕ ТЕМЫ

00:00 Вступление
00:37 Интерактивная доска
06:03 Webflow
11:12 Первая временная шкала (цвета)
16:45 Вторая временная шкала (загрузка в %)
18:05 Третья временная шкала (текст по астрологии)