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

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

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

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

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

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

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

Всем Салют!

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

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

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

и преподаю в

slack чат

https://greensocker.slack.com/

Приглашение/регистрация здесь

Файлы

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

https://github.com/alexcss/gsap-workshop

Материалы

1. GSAP CDN - все компоненты и базовые плагины
2. GSAP платные плагины (работают только локально или на codepen)
3. Getting Started with GSAP
4. Easing
5. 3D Transforms & More CSS3
6. Stagger

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

1. How SVG Draw Line Animation Works - на чистом CSS
2. Simple ScrollMagic Tutorial
3. TweenMax tips and tricks
4. 7 hidden gems of the GreenSock Animation Platform
5. TweenMax / GSAP Cheat codes list

1. ScrollMagic CDN - все компоненты и плагины
2. http://scrollmagic.io
3. ScrollMagic Examples
   1. Parallax
   2. Pin - зафиксировать элемент при скроле
   3. SVG Drawing
4. Бесплатный курс по ScrollMagic

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

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

1. TweenLite
2. TweenMax
3. TimelineLite
4. TimelineMax

Download GreenSock Cheat Sheet

ScrollMagic

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

http://alexcss.com