GreenSock (GSAP) анимации. JavaScript анимации. Базовые моменты.

🔥 Обе сборки можно получить по ссылке:
/ gulp-tailwindcss-sbork...
🏆 Поднять мотивацию и получить плюшки(исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoffee.com/tymoshchuk
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
⏱️ Тайм-коды: ⏱️
00:00 Вступление
01:33 Обзор результата
03:10 Обзор верстки
05:40 Как анимировать элементы через библиотеку gsap
07:20 Создаем TimeLine. Анимация подзаголовка
10:15 Анимация заголовка
13:29 Анимация текста
14:19 Анимация кнопок
16:31 Анимация логотипа
18:20 Анимация пунктов меню
19:44 Анимация звезд
22:34 Плагин ScrollTrigger. Анимация Hero Секции
27:21 Анимация background
28:23 Анимация Луны
29:32 Parallax Анимация звезд
34:17 Анимация секции Regions
40:28 Анимация секции Info
43:20 Анимация секции Featured
49:03 Заключение
📨 Сотрудничество ► [e-mail]
📨 Business inquiries ► [e-mail]

[@lets_try_js]

ПЕРЕЗАЛИВ. Добавил звука. Как сейчас слышно?

[@alexeyrubchenya6178]

Хорошо, так держать)

[@read_and_listen]

О, норм) Так куда веселее)

[@getFrontend]

Благодарочка, теперь звук в норме!!!) До этого приходилось скачать и через VLC плеер на 200% выкрутить

[@lets_try_js]

@@getFrontend что-то пошло не так)

[@Александр-Беляев]

Звук хорош)

[@-Liksait-]

Давно хотел начать изучать gsap вот твой ролик сохранил думал когда посмотрю и вот наступил время все четко спасибо за полезный ролик 🎥👨‍💻

[@user-pb1zu5wz9r]

Чудово, навіть така невеличка частина ліби але так ефектно.Дякую

[@Nebogr]

Спасибо. Побольше уроков для новичков. Берегите себя, автор. С наступающим новым годом вас.

[@lets_try_js]

взаимно)

[@user-wo4mw5yk7h]

Урок полезный. Благодарю. Вдвойне приятно что ты ещё и земляк

[@user-nd9wu4ep3p]

Дуже дякую за такий чудовий урок! Навіть мені, новачку, все зрозуміло! Сподіваюсь ще побачити багато таких чудових відео від Вас! ))

[@lets_try_js]

дякую! Щось точно буде)

[@Александр-Беляев]

Спасибо большое за видео 😌

[@dimitriy8689]

Хорошее подробное видео, то что надо, Лайк!

[@user-bg3hu1oz4y]

Топовый видос. Спасибо большое!

[@lets_try_js]

благодарочка)

[@AntonioBenderas]

Привет!!! Рад что всё норм, хорошие уроки.

[@lets_try_js]

благодарю)

[@nshebeko]

очень классно, давай еще ролики по treejs)

[@oilprint]

круто вийшло !!!!

[@lets_try_js]

добре що вийшло)

[@oilprint]

cool

[@INTTable]

жду следующий видос про гринсок и скролл анимацию

[@lets_try_js]

уже в следующем году)

[@444elegant2]

Просто топчик Можно макет если есть

[@lets_try_js]

нет макета, просто накидал в HTML сразу

[@elevaalex1225]

Как-то пробовал jsap в работе. Красиво конечно получается, но вылез геморой: перестала работать внутристраничная навигация. Если будете пробовать, поймете о чем я. Пришлось ее тоже через jsap реализовать, вроде плагин ScrollTo использовал для этого. Короче для себя я решил, что это прикольная вещь если делаешь свой блог или какой-нибудь лендос для мероприятия. Но не для серьезных бизнес проектов. P.S. это только мое мнение. В целом библиотека норм.

[@elevaalex1225]

Возможно я просто с какой-то старой версией работал. Потому что мне там пришлось body еще в две дополнительные блока-обертки засунуть чтобы все заработало

[@Atractiondj]

Хотел начать изучать GSAP и когда увидел какой большой может получиться функция анимации сказал себе, да ну его нах... можно использовать IntersectionObserver для элементов в поле видимости и создавать CSS анимаций. Вот пример скрипта const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.remove('hidden'); entry.target.classList.add('show'); } else { entry.target.classList.remove('show'); entry.target.classList.add('hidden'); } }); }); const hiddenElements = document.querySelectorAll('.hidden'); hiddenElements.forEach((el) => observer.observe(el)); и вот css .animeee.hidden { opacity: 0; } .animeee.show { -webkit-animation: fadeInLeft 1s both; animation: fadeInLeft 1s both; } .animeee.show:nth-child(2) {animation-delay: .2s;} .animeee.show:nth-child(3) {animation-delay: .4s;} .animeee.show:nth-child(4) {animation-delay: .6s;} .animeee.show:nth-child(5) {animation-delay: .8s;} .animeee.show:nth-child(6) {animation-delay: 1s;} @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } И кто то скажет что ой тут надо много писать... а я скажу такой код проще администировать, а если его писать на SCSS то еще проще .animeee.hidden { opacity: 0; } .animeee.show { animation: fadeInLeft 1s both; @for $i from 2 through 6 { &:nth-child(#{$i}) { animation-delay: 200ms * ($i - 1); } } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } В общем благодарю за старания, но я учить GSAP не буду из-за возможности поддержки и оптимизации кода

[@lets_try_js]

ну если делать базовые какие-то вещи, то можно действительно через intersectionObserver, но библиотека GSAP дает куда больше возможностей, елси нужно сделать что-то интересное)

[@Atractiondj]

@@lets_try_js согласен, но зачастую супер сложных анимации не нужно, ведь главное конверсии а не аттракцион анимации. Все упирается в пользовательский опыт. Вот если бы все браузеры начали поддержку scroll timeline, gsap по большей части умер... Но в принципе можно сказать можно использовать анимации только для пользователей хром а остальные пусть смотрят статику, по примеру Apple, анимация на сайте работает только с устройств на IOS, на Виндоус анимации не работают

[@Nebogr]

А вы можете прикреплять файл с готовым кодом урока, чтоб мы могли скачать и тренироваться вместе с вами?

[@lets_try_js]

как показывает практика - если есть готовый код то ты ничему не научишься... только практика, только хардкор

[@Nebogr]

а начальный код можете прикреплять, чтоб дальше джаваСкрипт делать с вами. Или макет

[@Flex86]

@@lets_try_js Поддерживаю! Вы правы на 100%

[@user-pb1zu5wz9r]

Не ленись сам напечатать в следующий раз скопипастишь😂

[@BMikel]

все красиво, но как оно на мобильных устройствах будет? В наше время около 80% если не больше заходят в интернет с мобильных

[@internationaluser86]

На мобилках отключается обычно

[@lets_try_js]

Да, на мобильных по умолчанию эти анимации отсутствуют )

[@user-rz5dh6wv3q]

А почему она на мобилках не работает?

[@deny_channel]

@@lets_try_js у меня на телефоне все анимации работают по умолчанию, как их можно отключить?

[@lets_try_js]

@@deny_channel в каком-то из роликов про GSAP я рассказываю как это сделать. пересмотри