Профессиональный онлайн-курс
Весь стек браузерной анимации — CSS, SVG, Canvas, WebGL, шейдеры на GLSL и 3D в Three.js. Масштабный личный проект для портфолио.
Уровень: сеньоры для мидлов. Вы разберётесь, как анимации устроены под капотом, и научитесь собирать их с нуля — от CSS-переходов до шейдеров и постобработки в Three.js. На русском языке.
Асинхронный формат. Без потоков и дедлайнов — проходите разделы в своём темпе.
От CSS-переходов до управления камерой в Three.js. В основной части курса анимации создаются на чистых технологиях: вы видите, что происходит на каждом уровне, от пайплайна отрисовки до шейдерного кода. GSAP и PixiJS показывают, как использовать библиотеки, когда фундамент уже есть.
В каждом разделе — теория от практиков и пошаговые демонстрации. Задания построены на реальных проектах, к каждому есть эталонное решение.
Рассчитан на разработчиков с опытом в вёрстке и JavaScript. Подойдёт и тем, кто прошёл курсы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».
Вы фронтенд-разработчик и хотите выйти за рамки CSS-анимаций.
Разбираете анимации на сайтах и хотите понять, как они сделаны. От CSS до Three.js — через реальные задачи.
CSS-анимации освоили, пора глубже. Каждый раздел ведёт к следующему: CSS, SVG, Canvas — и дальше WebGL с Three.js.
Шейдеры и Three.js почти везде на английском. Здесь — полная программа на русском: визуальные примеры, разбор в коде.
Портфолио решает. Два проекта — весь стек от CSS до 3D на Three.js.
Сделано для разработчиков, у которых мало времени на обучение.
На курсе вы получите:
Связывает теорию с типовыми задачами на рынке. У вас будет понимание того, где и как применить полученную теорию.
Построена от простого к сложному. Вы легко погрузитесь в тему, даже если ничего про неё не знали раньше.
Актуальная и обновляемая теория, проверенная рынком. Никакой «воды» — вы получите только необходимые знания.
Поможет вам с ответами на вопросы и углублением знаний.
Комьюнити каждого курса — это авторы, опытные разработчики и студенты, прошедшие или проходящие этот курс.
Комьюнити не только помогает в освоении материала, но и постоянно делает курс лучше.
Курс асинхронный — без живых сессий, потоков и дедлайнов. Открываете раздел, проходите в своём темпе, двигаетесь дальше.
Шейдеры, 3D-сцены и управление камерой — темы со входным порогом. Мы проведём через него пошагово: сначала теория, потом демонстрация, потом ваш код.
В каждом разделе:
Каждая статья написана практиками и проверена на реальных проектах: 12 принципов Диснея, пайплайн отрисовки браузера, GLSL, управление камерой и другие темы.
Демонстрации по каждой технологии курса: CSS-переходы, SVG-морфинг, Canvas-физика, WebGL-шейдеры, 3D-сцены.
Разбираем каждый шаг: от постановки задачи до работающего кода.
Задания в каждом разделе, от простых к продвинутым.
Задачи из реальных проектов: анимация интерфейсов, спрайтовые листы, шейдерные эффекты, 3D-модели.
Авторы курса, опытные разработчики и студенты — в одном сообществе.
Задавайте вопросы по материалу и делитесь решениями.
Восемь разделов. От CSS transition до 3D в Three.js — каждый следующий раздел опирается на предыдущий, и к финалу вы владеете всем стеком.
Бесплатный раздел, с которого стоит начать. Вы разберёте 12 принципов анимации Disney в контексте веб-интерфейсов, освоите CSS transition и кривые Безье, поймёте, почему одни анимации выглядят естественно, а другие раздражают.
Анимация — иллюзия движения. Чтобы она убеждала, нужно понимать, как глаз воспринимает движение и почему 60 кадров в секунду стали стандартом для веба.
transition: четыре свойства, cubic-bezier(), ступенчатые переходы через steps().
Демонстрации
Упражнения на CSS transition: от базовых свойств до анимации кнопок, чекбоксов и тогглов.
Полный контроль над @keyframes и свойствами animation — от бесконечных циклов до побуквенного появления текста. Вы разберётесь, как браузер рисует каждый кадр, почему анимация left тормозит, а transform работает на GPU. Научитесь отлаживать производительность в Chrome DevTools и учитывать prefers-reduced-motion.
CSS @keyframes даёт больше свободы, чем transition: процентные ключевые кадры, управление направлением, бесконечное повторение, пауза по условию. В разделе вы освоите основные свойства группы animation и научитесь комбинировать их.
will-change и translateZ(0). Подсветка перерисовок и диаграммы Ганта в DevTools.prefers-reduced-motion в CSS и JavaScript, стратегии деградации.stagger и подготовкой GPU-слоёв.ДемонстрацииУпражнения на @keyframes: от синтаксиса from/to до множественных анимаций, fill-mode и play-state.
SVG открывает пространство, недоступное CSS: морфинг контуров, движение по криволинейным траекториям, прорисовка объектов штрихом. Вы освоите SMIL — язык анимации, встроенный в сам формат SVG, — и научитесь синхронизировать десятки элементов без единой строки JavaScript.
SMIL (Synchronized Multimedia Integration Language) — четыре XML-тега — animate, set, animateTransform, animateMotion — покрывают задачи от смены цвета до движения по произвольному контуру.
animate: интерполяция атрибутов с настройкой длительности, повторов и заполнения.animateTransform: вращение, масштабирование, наложение трансформаций через additive: sum.animateMotion: движение по пути с автоматическим вращением по касательной.stroke-dasharray и stroke-dashoffset.ДемонстрацииУпражнения на внутреннее устройство SVG: viewBox, preserveAspectRatio, системы координат.
CSS и SVG дают потолок. Дальше — JavaScript. Вы освоите requestAnimationFrame, линейную интерполяцию, спрайтовую анимацию и собственные функции тайминга — bounce, elastic, back. Научитесь рисовать и анимировать в Canvas, а для тяжёлых сцен подключите PixiJS.
Покадровая анимация на JavaScript — полный контроль над каждым кадром при 60 fps. Раздел начинается с requestAnimationFrame и линейной интерполяции lerp(from, to, t).
bounce(t), elastic(x, t), back(x, t). Обёртки makeEaseOut и makeEaseInOut.save()/restore().ДемонстрацииШейдеры — код, который выполняется на видеокарте параллельно для каждого пикселя. Вы разберётесь, как устроен WebGL-пайплайн, напишете первые программы на GLSL и подключите их к Three.js через ShaderMaterial. Результат — цветовые фильтры, режимы наложения, маски, шум и displacement прямо в браузере.
Раздел начинается с архитектуры GPU: почему параллельные вычисления на видеокарте обрабатывают миллионы пикселей за миллисекунды и как это использовать в браузере через WebGL.
vec2—vec4, mat4, sampler2D.smoothstep и mix.ДемонстрацииКак собрать 3D-сцену в браузере из геометрий, материалов и источников света — и заставить её двигаться. Вы освоите полный цикл: от параметрических примитивов и загрузки glTF-моделей до PBR-материалов и squash-and-stretch анимации с сохранением объёма.
Объект на сцене — это Mesh: геометрия определяет форму, материал — внешний вид, а Object3D задаёт положение в пространстве. Вы разберёте иерархию объектов, наследование трансформаций и группирование через Group.
ДемонстрацииКамера в 3D — инструмент режиссуры. Вы научитесь проектировать Camera Rig под конкретную задачу, применять правила монтажа к переходам между сценами и добавлять эффекты постобработки. Отдельные темы — адаптация под мобильные устройства и предзагрузка ресурсов.
Риггинг: вместо того чтобы двигать камеру напрямую, вы создаёте иерархию узлов, где каждый отвечает за одно движение — поворот, подъём, приближение.
ДемонстрацииЗа пределами CSS и Three.js — ещё несколько стеков: Web Animation API, CSS Houdini, GSAP, Lottie, игровые движки. Разбираем каждую технологию: когда выбрать, с чем сочетается, какие ограничения.
element.animate(), управление воспроизведением, события, выполнение в отдельном потоке браузера.CSS.registerProperty() для анимации градиентов, Paint API, Animation API для скролла и наведения.gsap.to(), Timeline с цепочками, позиционированием и метками, функции плавности, экосистема плагинов.ДемонстрацииАнимация персонажа средствами Web Animation API: въезд с вращением, фоновое покачивание, управление воспроизведением через цепочку onfinish.
В каждом разделе вы работаете с учебным проектом — мы показываем решение, вы повторяете и разбираете каждый шаг. После этого применяете навыки на личном проекте самостоятельно.
Промо-страница фестиваля иллюзионистов — на ней вы отработаете каждую технологию курса: CSS-переходы, SVG-анимации, Canvas-сцены и 3D-эффекты на Three.js.
В каждом разделе — задания по личному проекту. Вёрстка готова, вы сфокусируетесь на анимациях.
Пять экранов, 3D-фон на Three.js, чат-бот «Соня» с игровой механикой и три варианта финала.
Вы реализуете CSS-анимации посимвольного появления, SVG-морфинг призов, Canvas-сцены с физикой и полноценные 3D-комнаты с шейдерной постобработкой. Масштаб — 150+ исходных файлов.
«Думал, что шейдеры — это про геймдев. На WebGL-разделе написал свой первый фрагментный шейдер на GLSL и понял, что синтаксис ближе к CSS-фильтрам, чем казалось. От transition к Three.js курс ведёт плавно — каждый раздел опирается на предыдущий».
Артём Мальцев
«Через месяц после раздела про Three.js взял бриф на промо-лендинг с 3D-сценой. Раньше такие задачи уходили подрядчикам. Собрал Camera Rig, настроил материалы и освещение, адаптировал под мобильные — по методике из курса».
Никита Ильин, фронтенд-разработчик в «Кинетика»
«Пришёл на курс в поисках вдохновения и нового вектора роста — курс надежды оправдал. Коллекция полезных рецептов: анимации с clip-path, глитч-эффекты, параллакс, 3D-трансформации — это часть того, что я исследовал на курсе. Теперь лучше представляю, куда и как расти в веб-анимации. Область обширнее, чем виделось раньше».
Евгений Филатов
«Дважды начинал разбираться в Three.js по англоязычным туториалам — оба раза бросал на шейдерах. Здесь теория, демонстрации и эталонные решения на русском. Застрял на задании с displacement, открыл авторское решение, сравнил со своим кодом — и увидел, где ошибался».
Ярослав Никулин
«После этого курса начинаешь видеть веб по-новому. Листая страницы, понимаешь механику: эффекты появления, трансформации кнопок, переходы цветов. Разбирается и теория — скролл, перспектива, пространственные координаты, производительность. Всё на наглядных примерах с реальных сайтов».
Олег Акимов
«Раньше собирала анимации по сниппетам с CodePen. Работало, но при любом баге в производительности терялась. После курса вижу картину целиком: от Composite-свойств и requestAnimationFrame до фрагментных шейдеров. Другой уровень контроля».
Полина Жукова
«Проходил четыре месяца параллельно с работой. Без потоков и дедлайнов — разделы открыты, возвращаешься когда удобно. К WebGL-модулю возвращался дважды: первый раз прочитал теорию, через две недели сделал задания. Формат подошёл».
Тимур Калинин
«Научился создавать анимации для своих проектов и оптимизировать их. Отдельно порадовали события animationstart, transitionend — раньше о них не знал, а они открывают много возможностей».
Сергей Закиров
«Разделы по CSS и SVG прошла ровно. На WebGL стало заметно тяжелее — потратила на него втрое больше, чем планировала. Эталонные решения спасали: сравниваешь свой код с авторским и видишь, где ошиблась. Сейчас читаю чужой GLSL и понимаю, что происходит».
Дарья Морозова
«Модули обновляются новыми материалами по запросам студентов. Однозначно рекомендую тем, кто хочет прокачать навыки в анимациях».
Иван Мулярчик, фронтенд-разработчик в «Орион Софт»
«Сложный и интересный курс по анимации SVG. Много заданий на закрепление материала. Давно планировала пройти — сильно не хватало таких знаний во фронтенде».
Елена Домингос
«В начале показалось, что практики будет мало — следующие разделы развеяли это заблуждение. Отдельное спасибо за демонстрации, в которых можно детально посмотреть код».
Мария Елистратова
«Последовательно и доступно объясняются примеры — от простого к сложному. Обучающие задачи уже встретились у меня на практике».
Валерий
«Развёрнутая и методичная подача материала. Постепенное погружение от простого к сложному, яркие наглядные примеры, хорошие практические задания».
Олеся Гут
«Полезно освежить знания и узнать новое. Модуль с производительностью анимации — самый интересный».
Денис Воробьёв
Пройдёте курс — получите электронный сертификат
Образовательная деятельность осуществляется на основании государственной лицензии № 3026 от 6 июня 2017 года.
14 лет на рынке веб-образования. Этот курс по анимации мы разработали в 2020 году и с тех пор обновляем: актуальные версии инструментов, новые задачи и примеры.
Перед обновлением программы изучаем вакансии. Курс учит тому, что спрашивают на технических секциях и применяют в продакшене.
Чистые технологии в основе. Каждый раздел начинается с теории и демонстрации, потом — практическое задание. К каждому заданию есть эталонное решение.
Загружаем…