В этом модуле мы начнем знакомство с анимациями, разберемся с тем, как работают transition, animation и @keyframes. В чем их отличия, что и когда лучше применять. Разберемся с наиболее частыми ошибками и научимся их исправлять. Поговорим про качество анимаций и как над ним работать.

Тема 1: Вводное занятие: знакомство с курсом, обзор анимации/знакомство с анимацией

Тема 2: Трансформации и переходы в css

Тема 3: Практическое применение css переходов transition

Тема 4: CSS Анимация animation и @keyframes

Тема 5: Анимационные истории

Во втором модуле мы научимся запускать анимации по клику и скроллу. Разберем типичные ситуации и компоненты, как нарпимер, открытие меню, переклюение слайдеров, вкладок и аккордеонов. Научимся более интересно работать с css-анимациями за счет событий в JavaScript.

Тема 1: Анимации по клику

Тема 2: Анимация элементов форм

Тема 3: Слайдер

Тема 4: Аккордеон и табы

Тема 5: Анимации по скроллу

Третий модуль посвящен знакомству с 3D, здесь мы разберемся с тем, что такое трехмерные трансформации в css, что такое параллакс и как его можно имитировать с помощью JS.

Тема 1: Классический JS параллакс

Тема 2: Свойства 3D трансформации

В четвертом модуле познакомимся со спецификацией SVG и научимся применять css и smil анимации для таких элементов.

Тема 1: Введение в SVG

Тема 2: SMIL анимации

Тема 3: Анимация групп элементов

Тема 4: Интерактивные анимации

В пятом модуле узнаем о том, как можно создавать анимации с помощью JavaScript, поговорим про прозводительность анимаций и как делать то, что не может css. Познакомимся с еще одной технологией - Canvas, и создадим с ее помощью еще несколько анимаций.

Тема 1: JS анимации

Тема 2: Animation()

Тема 3: Введение в Canvas

Тема 4: Анимация простых элементов & best-pracices

Тема 5: Работа с изображениями и текстом

Тема 6: Анимация изображений & best-pracices

Тема 7: Анализ производительности JS анимаций

Тема 8: GSAP

Шестой модуль будет посвящен тремерной графике и WebGL, который будем рассматривать на примере библиотеки Three.js. Создадим несколько больших и интересных анимаций экранов сайта.

Тема 1: Введение в WebGL

Тема 2: Библиотека Three.js

Тема 3: Работа с готовыми моделями

Тема 4: Работа с материалами

Тема 5: Анимация объектов в three.js

Тема 6: Типы камер и их настройка

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

Тема 1: UX&UI

Тема 2: ПО для работы с анимацией

Заключительный месяц курса посвящен проектной работе. Свой проект — это то, над чем интересно поработать слушателю. То, что можно создать на основе знаний, полученных на курсе. При этом не обязательно закончить его за месяц. В процессе написания по проекту можно получить консультации преподавателей.

Тема 1: Выбор темы и организация проектной работы

Тема 2: Консультация по проектам и домашним заданиям

Тема 3: Защита проектных работ

Тема 4: Подведение итогов и карьерное консультирование