Полный курс по GSAP для абсолютных новичков (2026)

Полный экспресс-курс по GSAP для абсолютных новичков, от пустой папки до вашего первого настоящего проекта. В конце вы сами создадите этот загрузчик изображений: счетчик доходит до 100, и последняя фотография заполняет экран. Вам понадобится лишь немного HTML и CSS. Я объясняю каждое новое слово по ходу дела, а также каждое свойство CSS и каждый фрагмент JavaScript прямо в процессе написания. В большинстве глав также показана ошибка, которую допускает почти каждый новичок, и как ее исправить, а в каждом уроке есть небольшое задание «попробуй сам». Что вы узнаете: Что такое GSAP и чем он отличается от CSS-анимации Настройка с нуля: VS Code, один index.html, GSAP из CDN и проверка в консоли Ваш первый твин с gsap.to: цель, объект настроек, x и длительность Наиболее часто используемые свойства: x, y, вращение, масштаб, прозрачность, цвет фона и xPercent to, from, fromTo и set, а также как остановить вспышку перед анимацией from Тайминг с помощью delay, repeat, yoyo и repeatDelay Сглаживание: none, power, back и elastic, а также как читать график сглаживания Смещение, включая сетку точек, распространяющуюся от центра Временные шкалы, параметр position и метки Элементы управления и события: воспроизведение, пауза, реверс, перезапуск, onComplete и всплывающее меню ScrollTrigger: начало и конец, маркеры, toggleActions, scrub и pin SplitText: линии, слова и буквы, маски и ожидание шрифтов Бонус: загрузчик изображений с контурным копированием, счетчиком и полноэкранным отображением Ссылки Бесплатная шпаргалка и все демонстрационные файлы: https://learn.dimaac.com/gsap Загрузчик изображений в рабочем режиме с кодом: https://learn.dimaac.com/gsap/13-imag... GSAP: https://gsap.com Документация GSAP: https://gsap.com/docs/v3/ Создайте эти файлы далее (каждый из них имеет собственное полное видео) Карточки FORM:    • This Award Winning Scroll Is Mostly CSS Gr...   Диаграмма Mineral:    • I Rebuilt an Awwwards Site of the Day Scro...   Butter scroll:    • I Rebuilt an Awwwards Site of the Day Scro...   Главы 0:00 Вступление 1:58 Что такое GSAP 5:42 Настройка из ноль 12:47 Ваша первая анимация 17:33 Свойства, которые вы будете использовать чаще всего 22:54 to, from, fromTo и set 28:30 Тайминг: delay, repeat, yoyo 32:00 Сглаживание 36:43 Смещение 42:50 Временные шкалы 46:32 Элементы управления и события 49:21 ScrollTrigger 54:43 SplitText 57:19 Бонус: создание загрузчика изображений 1:02:34 Итоги и что дальше Используемые инструменты GSAP 3.13.0 с ScrollTrigger и SplitText, загруженные из CDN jsDelivr VS Code и консоль DevTools браузера Шрифты Inter Tight от Google Fonts в демонстрациях SplitText и загрузчика Авторы Фотографии в загрузчике изображений взяты с Unsplash (лицензия Unsplash) от Klara Kulikova, Pigsy Ginx, Abizer Шихорвала, Павел Червинский, Александр Кауфман, Аззедин Руичи и Филипе Нобре. Музыка: "Digital Clouds" Алехандро Маганья (А. М.), Mixkit. GSAP создан компанией GreenSock, которая теперь является частью Webflow. Это видео не связано с ними. Хотите пройти этот курс по React? Напишите мне в комментариях. А если вы здесь новичок, подпишитесь, чтобы получать новые сборки GSAP каждую неделю. #gsap #javascript #webdevelopment