GreenSock Animation Platform на практике

Программа на сегодня 

Программа на сегодня 

  1. Знакомство
  2. Теория
  3. Добавляем анимации лендингу "Forkio"
  4. Обед
  5. Анимируем "GSAP records"
  6. Говорим про оптимизацию

Видео с мастеркласса здесь

 https://www.youtube.com/watch?v=yK32xKa2_r8

Познакомимся?

Всем Салют!

Меня зовут Алексей

Я веселый Front-end разработчик

Я верстаю сайты

и преподаю в

slack чат

Файлы

git clone https://github.com/alexcss/gsap-workshop ./ && rm -rf .git

cd gsap
npm i
npm run gulp

Описание папок

  1. Forkio - лэндинг без анимаций
  2. Forkio-classroom - что сделали на воркшопе
  3. gsap - верстка без анимаций
  4. gsap-classroom - что сделали на воркшопе
  5. gsap-final - финальный вариант со всеми анимациями
    (ajax переход между страницами работает только на локальном или живом сервере)

ВАЖНО! - для сборки папок gsap-* нужно использовать команды 

npm i
npm run gulp

Материалы

Полезные статьи

Платные плагин

  1. DrawSVG - free альтернатива здесь
  2. morphSVG - free альтернатива anime.js
  3. SplitText - free альтернатива split-html-to-chars

ScrollMagic

Спасибо за внимание!

GreenSock Animation Platform на практике

By Alexey Kalyuzhnyi

GreenSock Animation Platform на практике

  • 2,275