Урок GSAP 3.6 - Начало работы - Эпизод 1
HTML-код
- Опубликовано: 1 окт 2024
- GSAP простая JS библиотека для анимации. Шпаргалка находится по адресу greensock.com/..., а первые шаги можно сделать по руководству greensock.com/.... Что на самом деле делает GSAP? Библиотека ПРОСТО манипулирует свойствами - изменяет их много раз в единицу времени, позволяется прятать и появляться элементы. GSAP поддерживает DOM, SVG, canvas и и не только! В CSS позволяет менять почти все CSS-св-ва, среди них нам будут интересные размеры height и width, работа с непрозрачностью opacity и другие. В SVG нам пригодятся fill, stroke и, тоже, opacity! У GSAP есть дополнительные плагины для отрисовки SVG и его морфинга! И вообще можно менять любые числовые величины и интегрировать библиотеку с другими инструментами, вы даже можете прикрутить её к React или Vue, но.. мы будем сосредотачиваться на главном.
Поддержите спонсорством🚀 / @htmllabru
🏁 Плейлист: • Урок GSAP 3.6 - Начало...
✔️ GSAP 3.6 №1 Начало работы - • Урок GSAP 3.6 - Начало...
✔️ GSAP 3.6 №2 Меняем свойства JS-объекта - • Урок GSAP 3.6 - Меняем...
✔️ GSAP 3.6 №3 Ease/Переходы gsap - • Урок GSAP 3.6 - Ease/П...
✔️ GSAP 3.6 №4 Анимируем заголовок h1 - • GSAP 3.6 - Анимируем б...
✔️ GSAP 3.6 №5 Шатаем stagger - • GSAP 3.6 - Шатаем stag...
✔️ GSAP 3.6 №6 Анимация и события - • GSAP 3.6 - Управление ...
✔️ GSAP 3.6 №7 Timeline - • GSAP 3.6 - Timeline - ...
✔️ GSAP 3.6 №8 Draggable плагин - • GSAP 3.6 - Draggable п...
✔️ GSAP 3.6 №9 TextPlugin плагин - • GSAP 3.6 - TextPlugin ...
✔️ GSAP 3.6 №10 MotionPathPlugin плагин - • GSAP 3.6 - MotionPathP...
✔️ GSAP 3.6 №11 Вспомогательные методы • GSAP 3.6 - Вспомогател...
onStart: function () {}
onStarted: function () {}
onComplete: function () {}
onCompleted: function () {}
не onCompleted а onComplete
в конце d не надо и функция сработает 1 раз и в самом конце
onComplete:function(){
console.log('opa');
},
Спасибо, Добрый Человек!) Тут колокол обязательно нажимаю)
Спасибо, Александр!)
Спасибо вам огромное за это видео!
Рад, что понравилось)
Руслан Белый от мира веб разработки
2024 спасибо
Отличный туториал. Чуть многовато пустого текста
Алексей, спасибо за видео! Хотя и документация нативно понятна и много информации в сети - ваши ролики смотреть приятно и, самое главное, знакомство с материалом происходит гораздо быстрее и доходчивей. Так всегда бывает когда о сложном рассказывает профессионал. Есть небольшая правка по ходу. Консоль логи отрабатывались у вас странно, потому что неверно написан метод onComplete. У вас он - onCompleted (последняя буква лишняя).
Максим, спасибо! Тогда первый раз столкнулся с GSAP и много сил ушло на работу. Прочитал ваш комментарий и понимаю - не зря) Спасибо за примечание с onComplete!
Все просто, спасибо!! Чуточку увереннее и без лишней воды пж.
С меня лайк
Красавчик, все быстро и подробно рассказал, продолжай в том же духе
интересное видео и хорошая подача, спасибо за информацию
спасибо)
Очень интересно! Вы-молодец!)
Вот это библиотека!!! Супер👍🤝
Велике дякую. Дуже корисно!
Почему gsap scrolltriger резко и трабло работает на iPhone safari в чем проблема ?
¯\_(ツ)_/¯
Много смотрел разных уроков по js НО этот лучший для понимания т.к. просто о сложном на простом доступном каждому языке объясняется.
Далеко не каждому дано подать правильно на понятном для начинающих языке информацию.
Спасибо добрый человек. очень интересно и с лёгкостью воспринимается информация.
Спасибо за комментарий!
Большое спасибо за видео! Успехов Вам, подписалась)
Ух, ты!!! 🙈
топ! продолжай в том же духе!!!
Видос классный. Спасибо
блин, ребят, ну серъёзно, чтобы квадратик на 100px подвинуть надо целую библиотеку в проект тянуть?
Но на всякий случай лайк и спасибо за науку ))
Тут дело в унификации, когда в условной студии отдается предпочтение какому-то инструменту и все должны знать о нём, а не писать каждый своё решение (в следующих эпизодах планируется написание интересных анимаций, который можно было бы и на ваниле написать, но мы будем gsap пробовать)
Этот ролик не является убедительной рекомендацией использовать именно этот инструмент ☺.
@@HtmllabRu Ждём. Смотрим. Учимся )
спасибо
Давай еще
лайкнул дважды
Спасибо, классный урок