GreenSock Animation Platform на практике
Программа на сегодня
Программа на сегодня
- Знакомство
- Теория
- Добавляем анимации лендингу "Forkio"
- Обед ☕
- Анимируем "GSAP records"
- Говорим про оптимизацию
Видео с мастеркласса здесь
Познакомимся?
Всем Салют!
Меня зовут Алексей
Я веселый Front-end разработчик
Я верстаю сайты
и преподаю в
slack чат
Файлы
git clone https://github.com/alexcss/gsap-workshop ./ && rm -rf .git
cd gsap
npm i
npm run gulp
Описание папок
- Forkio - лэндинг без анимаций
- Forkio-classroom - что сделали на воркшопе
- gsap - верстка без анимаций
- gsap-classroom - что сделали на воркшопе
-
gsap-final - финальный вариант со всеми анимациями
(ajax переход между страницами работает только на локальном или живом сервере)
ВАЖНО! - для сборки папок gsap-* нужно использовать команды
npm i
npm run gulp
Материалы
Полезные статьи
- ScrollMagic CDN - все компоненты и плагины
- http://scrollmagic.io
-
ScrollMagic Examples
- Parallax
- Pin - зафиксировать элемент при скроле
- SVG Drawing
- Бесплатный курс по ScrollMagic
Платные плагин
ScrollMagic
Спасибо за внимание!
GreenSock Animation Platform на практике
By Alexey Kalyuzhnyi
GreenSock Animation Platform на практике
- 2,275