Веб-анимация на CSS и JavaScript + GSAP и AI — Frontend Blok
И да пребудет с тобой сила!
Главная Курсы Веб-анимация в эпоху ИИ

Веб-анимация
в эпоху ИИ

Научитесь создавать эффектные анимации для сайтов на CSS и JavaScript, работать с GSAP и использовать AI, чтобы делать их быстрее
Записаться
Дата старта
{{ bundle && bundle.hasOwnProperty('start_date') ? bundle.start_date : '' }}
Длительность
3 недели
Стоимость
{{ bundle && bundle.start_price }} РУБ {{ bundle.old_start_price }} РУБ
Анимация на сайтах, нейросети, ИИ, AI, CSS, JavaScript

Что будет на курсе?

CSS и JavaScript
анимации
Разберётесь, как создавать и управлять веб-анимациями с помощью CSS и JavaScript: от простых эффектов до SVG, Canvas, Lottie, WebGL и 3D.
Анимации GSAP
Научитесь создавать сложные интерактивные эффекты, scroll-анимации, параллакс и целые анимационные сцены с помощью одной из самых популярных библиотек.
AI как помощник
Научитесь ставить задачи AI, проверять сгенерированный код, находить ошибки и быстрее превращать идеи и референсы в готовые веб-анимации.

Расписание

01

модуль

Веб-анимация в действии!
  • Основы CSS-анимаций
  • Углубленное использование CSS-анимаций
  • Введение в JavaScript-анимации
  • Библиотеки для работы с анимациями
  • Работа с Canvas в JavaScript
  • SVG-анимации
  • Lottie-анимации
  • WebGL и 3D-анимации
  • Gif и видео вместо анимаций
  • Производительность анимаций
Дипломная работа:Мы предоставим несколько заданий, которые будут охватывать все темы, чтобы закрепить все типы анимаций.
02

модуль

Анимация GSAP
  • Анимация вращений и искажений
  • Scroll-анимации с ScrollTrigger
  • Анимация изображений и параллакс
  • Таймлайны и комплексные сцены
  • Анимация карточек и списка
  • Анимация ссылок и кнопок
  • Изменение курсора мыши
Дипломная работа:Мы предоставим статичную верстку сайта, которую необходимо будет оживить с помощью GSAP.
Бонус:
  • Чек-лист по разделам «Что можно анимировать на сайте»
  • Видео «5 частых ошибок при работе с GSAP и как их избежать»
  • Видео «Как опубликовать сайт на GitHub Pages»
03

модуль

Создаём анимации быстре с AI
  • От идеи до анимации: ставим задачу AI
  • ИИ для генерации 2D и 3D анимаций
  • Оценка AI кода: хороший он или плохой? Находим и исправляем ошибку
  • Сделай как на этом сайте: превращаем референс в анимацию с AI
Бонус:Готовые промпты для создания мощных анимаций

Обучение проходит на авторской платформе

Frontendblok education platform

Как проходит обучение?

Получаете доступ на учебную платформу Frontend Blok
Каждый день в 6 утра по мск открывается доступ к новому уроку
Просматриваете урок, где разбираете новую тему на реальных примерах
Выполняете домашнее задание для закрепления пройденного материала
Отправляете выполненное ДЗ в чате и выполняете рекомендации
Получаете сертификат об окончании обучения: на русском и английском

Где используются анимации?

Веб-сайты
В этом разделе можно объединить сайты и веб-приложения. Вы можете реализовать анимации загрузки, плавные переходы между экранами, hover-эффекты, анимацию кнопок при нажатии, параллекс и т.д.
Конструкторы
На таких сервисах есть встроенные настройки анимаций, но их возможности ограничены, так как расчитаны на людей, которые не работали с кодом, но Вы сможете внедрить анимацию любой сложности.
Веб-игры
Проявите себя, как художник, который прорабатывает внешность и движения персонажей, вид внешних объектов, анимацию интерфейса, а также внедрить эффекты с добавлением физики.

Общая информация по курсу

Короткие видеоуроки
Все уроки заранее записаны и смонтированы так, чтобы не было воды. Только необходимая теория, наглядные примеры и практика. Вы сами выбираете удобное время для обучения и можете пересматривать сложные моменты столько раз, сколько нужно.
Теория только по делу
Длительность большинства уроков около 15–25 минут. В каждом есть только необходимая теория, на которой важно акцентировать внимание, чтобы успешно выполнить домашнее задание.
Практика после каждого урока
После каждого урока вы получаете практическое задание и закрепляете материал на реальном макете. В итоге у вас будет готовая работа, которую можно добавить в своё портфолио и показать потенциальному работодателю или клиенту.
Обучение в удобном темпе
Уроки открываются каждый день в 06:00 по мск. Все материалы, приложенные к уроку, остаются доступны до даты, указанной внутри платформы. , поэтому вы можете учиться в своём темпе и при необходимости возвращаться к пройденному.

Сколько стоит

3 модуля: CSS/JS анимации, GSAP и AI
Практика на реальных задачах — от простых эффектов до сложных анимационных сцен
Полноценная работа с GSAP для создания современных интерактивных сайтов
AI-инструменты и готовые промпты, чтобы создавать анимации значительно быстрее
Дипломные работы после каждого практического модуля
Сертификат об окончании курса
{{ bundle.prices.start.price }} руб
{{ bundle && bundle.hasOwnProperty('prices') && bundle.prices.hasOwnProperty('start') ? bundle.prices.start.current_price + ' руб' : '' }}
Купить курс Хочу скидку

Что говорят об обучении?

Николай Вязьмин
Николай Вязьмин
25 декабря 2025
Интенсив очень познавательным вышел. Новый инструмент для разработки сайтов. Да, нужно к синтаксису немного привыкнуть и некоторые свойства запомнить, но усвоить можно. Спасибо.
Татьяна Стархова
Татьяна Стархова
20 мая 2025
Легко воспринимается информация
Екатерина Титарева
Екатерина Титарева
19 ноября 2024
Благодарю за такой обширный, несмотря на то, что он мини - курс! Как раз хотела получить представление, какие бывают анимации и как с ними работать) Очень понравилось ещё, что есть чат...
Ирина Глыцко
Ирина Глыцко
5 ноября 2024
Курс очень крутой! Многие моменты охотно внедряю в жизнь, чему очень рада)
Дмитрий Смирнов
Дмитрий Смирнов
4 ноября 2024
Прошел марафон по веб-анимации у Анны Блок. Это не совсем курс, это именно марафон. Каждый день вы узнаете новую информацию и делаете домашнюю работу (на выходных отдых, или можно догнать, если отстал)...
Юлия Орешкина
Юлия Орешкина
2 ноября 2024
Курс получился очень насыщенный и интересный! Подача материала на высоте, внимательное отношение к обучающимся и подбор действительно полезной информации, с которой можно успешно развиваться дальше самостоятельно...
Пагинация
Предыдущий
Следующий

Часто задаваемые вопросы

Нужно ли хорошо знать JavaScript, чтобы пройти курс?
Развернуть
Глубоких знаний JavaScript не требуется. Вы будете работать с готовыми инструментами и постепенно разберётесь с тем JavaScript, который нужен именно для создания веб-анимаций. Если вы уже знакомы с HTML/CSS и понимаете основы JS. Этого достаточно, чтобы начать.
Я никогда не работал(а) с GSAP. Получится ли у меня?
Развернуть
Да. Мы начинаем с основ GSAP и на практике разбираем, как создавать анимации, управлять последовательностью эффектов и собирать из отдельных движений полноценные интерактивные сцены. Вам не нужно изучать документацию самостоятельно — всё показывается на реальных примерах.
Зачем учиться веб-анимации, если сейчас всё умеет делать ИИ?
Развернуть
ИИ действительно может написать код анимации, но хороший результат всё равно требует понимания того, что именно нужно сделать и как проверить результат. На курсе вы научитесь использовать AI как помощника: генерировать код быстрее, находить ошибки, дорабатывать анимации и экономить время, не превращая разработку в «копирование кода из нейросети».
Что я смогу создавать после курса?
Развернуть
Вы сможете самостоятельно добавлять на сайты эффектные анимации: появление и движение элементов, интерактивные эффекты, сложные последовательности, анимации при скролле и другие современные визуальные решения с помощью CSS, JavaScript и GSAP. Главное — вы будете понимать, как придумать, собрать и адаптировать анимацию под конкретный сайт.
Не устареют ли эти знания из-за развития ИИ?
Развернуть
Наоборот, курс построен с учётом того, как сегодня меняется сфера frontend-разработки. Вы изучаете не только CSS, JavaScript и GSAP, но и подход к работе с AI, который позволяет создавать и дорабатывать анимации значительно быстрее. Инструменты будут меняться, а навык понимать анимацию, управлять ею и ставить задачи AI останется востребованным.
Закрыть
Павел Демьянов
Павел Демьянов
10 мая 2020
Все отлично, вижу путь для дальнейшего своего роста. Главное ваш курс помог увидеть картину, что создание верстки не сложное, есть свои особенности конечно с адаптивом, к ним нужно привыкнуть, а так в целом все достаточно просто, нужно нарабатывать себе опыт и все будет. У меня получился макет, потому что все наглядно на видеоуроке разобрано.

Рекомендую начинать верстать с этого курса. Это даст Вам понимание нравится ли Вам этим заниматься. Пускай в курсе и не дают базовых знаний по используемым фишкам, это не важно, важно то, что при желании вы можете всю информацию найти в интернете, Вас это сильнее прокачает, а если хотите сразу получить все знания по верстке в большем объеме, не отходя от кассы идите на курсы по Верстке к Анне, там Вам все разжуют!
Закрыть
Anastasia Tsepeleva
Anastasia Tsepeleva
3 апреля 2020
Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы сразу же получала ответ в видео-уроках. Обучаться было одно удовольствие. Ни грамма скуки, одна мотивация :)