ihatetomatoes
Создатель ihatetomatoes - профессиональный разработчик с более чем пятилетним опытом работы в одном из крупнейших электронных агентств Австралии.
Продолжительность
5 ч 33 мин
Категория
JavaScriptКоличество уроков
42 Видео
Дата добавления
3 дек. 2020 г., 20:53
Язык
Английский
Дата обновления
29 апр. 2026 г., 09:05
GreenSock Bella — это практический курс, который помогает понять, как создаются современные веб-анимации, и научиться воплощать креативные идеи в выразительные, динамичные интерфейсы. Материал подойдёт всем, кто хочет выйти за рамки базовых туториалов и создавать по-настоящему впечатляющие проекты.
О чём этот курс
Курс сфокусирован на разборе реальных инструментов и техник, которые используют современные веб‑разработчики и аниматоры. Вы изучите основные принципы анимации, освоите GreenSock (GSAP) и ScrollTrigger и научитесь применять их для создания плавных, выразительных эффектов.
Что вы узнаете
- Как работают веб-анимации и почему GSAP считается стандартом отрасли.
- Как создавать анимации вручную с помощью GreenSock.
- Как использовать ScrollTrigger для управления эффектами во время прокрутки.
- Как сочетать CSS-анимации и GSAP для достижения оптимального результата.
- Как создавать анимации, которые улучшают UX, а не перегружают его.
Почему ваш сайт может выглядеть иначе
Если стандартные уроки не дают ощутимого прогресса, проблема обычно не в вас — а в том, что большинство материалов не раскрывают реальные принципы построения креативных веб-анимаций. В Bella вы работаете не просто с кодом, а с визуальной логикой и структурой анимации, изучаете профессиональные подходы и учитесь применять их на собственных проектах.
Чем отличается Bella
- Пошаговые, короткие и ёмкие видеоуроки.
- Объяснение принципов, а не слепого копирования кода.
- Комбинация JavaScript, GSAP, ScrollTrigger и CSS.
- Упор на практику — вы создаёте реальные эффекты своими руками.
Кому подходит курс
Курс подходит веб‑разработчикам, дизайнерам, фронтенд‑новичкам и всем, кто хочет привнести в свои проекты больше креативности и динамики. Независимо от того, создаёте ли вы лендинги, брендовые проекты или экспериментальные сайты — навыки GreenSock помогут выделиться.
Как проходит обучение
- Вы смотрите короткие уроки и сразу повторяете действия в своём проекте.
- Осваиваете инструменты пошагово — от простых эффектов до сложных анимационных сцен.
- Закрепляете навыки на небольших, но показательных примерах.
Результат после прохождения
После курса вы сможете уверенно использовать GSAP и ScrollTrigger, создавать современную веб-анимацию и построить сайт, который выглядит профессионально и выделяется среди конкурентов. Вместо хаотичных экспериментов вы будете работать с чёткой структурой и профессиональными инструментами.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:05:47PGB – 01 – Course Introduction
- Урок 2. 00:08:01PGB – 02 – Navigation Links
- Урок 3. 00:03:49PGB – 03 – Navigation toggleClass
- Урок 4. 00:10:48PGB – 04 – Navigation Away
- Урок 5. 00:07:01PGB – 05 – Padding bottom hack
- Урок 6. 00:07:04PGB – 06 – Mouse move event
- Урок 7. 00:11:15PGB – 07 – Header left images
- Урок 8. 00:01:54PGB – 08 – Header completed
- Урок 9. 00:07:09PGB – 09 – Reveal Gallery Overview
- Урок 10. 00:06:16PGB – 10 – Reset image position
- Урок 11. 00:07:15PGB – 11 – Reveal Image
- Урок 12. 00:08:43PGB – 12 – Center Text
- Урок 13. 00:10:06PGB – 13 – Reveal Text
- Урок 14. 00:09:21PGB – 14 – Media Queries in JS
- Урок 15. 00:09:54PGB – 15 – Remove Event Listeners, killTweensOf
- Урок 16. 00:07:05PGB – 16 – Portfolio Overview
- Урок 17. 00:10:37PGB – 17 – Portfolio mouse enter
- Урок 18. 00:03:42PGB – 18 – Portfolio mouse leave
- Урок 19. 00:09:41PGB – 19 – Portfolio mouse move
- Урок 20. 00:04:35PGB – 20 – Parallax Images Overview
- Урок 21. 00:08:51PGB – 21 – Parallax ScrollTrigger
- Урок 22. 00:06:07PGB – 22 – Pin Navigation
- Урок 23. 00:09:58PGB – 23 – Highlight active item
- Урок 24. 00:07:02PGB – 24 – Update CSS custom property
- Урок 25. 00:09:08PGB – 25 – Scroll-jacking
- Урок 26. 00:02:43PGB – 26 – Smooth Scrolling Overview
- Урок 27. 00:05:35PGB – 27 – ScrollTo Section
- Урок 28. 00:10:28PGB – 28 – Smooth Scrolling with GSAP Part I
- Урок 29. 00:10:09PGB – 29 – Smooth Scrolling with GSAP Part II
- Урок 30. 00:03:08PGB – 30 – Smooth ScrollBar Setup
- Урок 31. 00:12:59PGB – 31 – Smooth ScrollBar
- Урок 32. 00:07:20PGB – 32 – Loading Animation Overview
- Урок 33. 00:11:05PGB – 33 – Loading Animation In
- Урок 34. 00:11:44PGB – 34 – Loading Animation Out
- Урок 35. 00:06:17PGB – 35 – Optimizing Loader
- Урок 36. 00:08:56PGB – 36 – Loading Progress Bar
- Урок 37. 00:12:34PGB – 37 – Images Loaded
- Урок 38. 00:11:12PGB – 38 – Setup Barba.js
- Урок 39. 00:05:44PGB – 39 – How to use VSCode Debugger
- Урок 40. 00:09:04PGB – 40 – Page Transition Timeline Part I
- Урок 41. 00:06:01PGB – 41 – Page Transition Timeline Part II
- Урок 42. 00:07:26PGB – 42 – Animate Barba.js Containers
Автор - ihatetomatoes
Комментарии
list of video that are missing:
Unit 1Final Integration & Overview
Unit 2Launch Bonuses
Could you update, please ? thank you.