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

[@lets_try_js]

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

[@alexeyrubchenya6178]

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

[@read_and_listen]

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

[@getFrontend]

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

[@lets_try_js]

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

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

Звук хорош)

[@СергейЖелезняк-ч8я]

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

[@-Liksait-]

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

[@Nebogr]

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

[@lets_try_js]

взаимно)

[@АлексейСоколов-у3к]

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

[@lets_try_js]

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

[@oilprint]

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

[@lets_try_js]

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

[@AntonioBenderas]

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

[@lets_try_js]

благодарю)

[@dimitriy8689]

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

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

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

[@ЕгорЕгорович-д2т]

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

[@oilprint]

cool

[@elevaalex1225]

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

[@elevaalex1225]

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

[@ЕленаКиїв]

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

[@lets_try_js]

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

[@nshebeko]

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

[@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, на Виндоус анимации не работают

[@INTTable]

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

[@lets_try_js]

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

[@Nebogr]

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

[@lets_try_js]

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

[@Nebogr]

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

[@Flex86]

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

[@ЕгорЕгорович-д2т]

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

[@Uncaught_in_promise]

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

[@internationaluser86]

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

[@lets_try_js]

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

[@АлександрКрасавин-х8э]

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

[@deny_channel]

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

[@lets_try_js]

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

[@444elegant2]

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

[@lets_try_js]

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

[@Sashad2003]

Спасибо за хороший контент. Я написал вам на эл.почту. Буду рад сотрудничать с вами.