GSAP 3.6 - Анимируем буквы заголовка h1 - Эпизод 4

У вашего броузера проблема в совместимости с HTML5

Давайте поработаем с анимацией букв заголовка первого уровня. В GSAP есть инструмент по автоматическому разбиению - SplitText, результат его работы можно посмотреть https://codepen.io/collection/KiEhr, но компания производитель GSAP - GreenSock, распространяет плагины по подписке. Они как и я просят быть их спонсорами :D Этот плагин SplitText входит во второй и третий уровень подписки. Может быть, но не обещаю, мои спонсоры откроют для меня этот уровень и мы потрогаем SplitText, а сейчас делаем все своими руками!

???? Плейлист: https://www.youtube.com/watch?v=FkqJ-EnKUxM&list=PLOQDek48BpZFzxKS-2sLAeSBB83x-xILB&index=1
???? Станьте спонсором! https://www.youtube.com/channel/UCBLJEWATAm4O1Tp0k76cGFg/join

✔️ GSAP 3.6 №1 Начало работы - https://www.youtube.com/watch?v=FkqJ-EnKUxM
✔️ GSAP 3.6 №2 Меняем свойства JS-объекта - https://www.youtube.com/watch?v=809-Abmk—w
✔️ GSAP 3.6 №3 Ease/Переходы gsap - https://www.youtube.com/watch?v=fc1XGkc2NAw
✔️ GSAP 3.6 №4 Анимируем заголовок h1 - https://www.youtube.com/watch?v=_ysLmK1tovw
✔️ GSAP 3.6 №5 Шатаем stagger - https://www.youtube.com/watch?v=3jpkWSy2kow
✔️ GSAP 3.6 №6 Анимация и события - https://www.youtube.com/watch?v=bQEeTom9U7E
✔️ GSAP 3.6 №7 Timeline - https://www.youtube.com/watch?v=-T76YSPrHFk
✔️ GSAP 3.6 №8 Draggable плагин - https://www.youtube.com/watch?v=V61efiTiZec
✔️ GSAP 3.6 №9 TextPlugin плагин - https://www.youtube.com/watch?v=mOboX4tykuM
✔️ GSAP 3.6 №10 MotionPathPlugin плагин - https://www.youtube.com/watch?v=s114AKJgJg4
✔️ GSAP 3.6 №11 Вспомогательные методы https://www.youtube.com/watch?v=Dbu6xRhL7UU