Как-то пробовал jsap в работе. Красиво конечно получается, но вылез геморой: перестала работать внутристраничная навигация. Если будете пробовать, поймете о чем я. Пришлось ее тоже через jsap реализовать, вроде плагин ScrollTo использовал для этого. Короче для себя я решил, что это прикольная вещь если делаешь свой блог или какой-нибудь лендос для мероприятия. Но не для серьезных бизнес проектов. P.S. это только мое мнение. В целом библиотека норм.
Возможно я просто с какой-то старой версией работал. Потому что мне там пришлось body еще в две дополнительные блока-обертки засунуть чтобы все заработало
Хотел начать изучать 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 не буду из-за возможности поддержки и оптимизации кода
ну если делать базовые какие-то вещи, то можно действительно через intersectionObserver, но библиотека GSAP дает куда больше возможностей, елси нужно сделать что-то интересное)
@@lets_try_js согласен, но зачастую супер сложных анимации не нужно, ведь главное конверсии а не аттракцион анимации. Все упирается в пользовательский опыт. Вот если бы все браузеры начали поддержку scroll timeline, gsap по большей части умер... Но в принципе можно сказать можно использовать анимации только для пользователей хром а остальные пусть смотрят статику, по примеру Apple, анимация на сайте работает только с устройств на IOS, на Виндоус анимации не работают
ПЕРЕЗАЛИВ. Добавил звука. Как сейчас слышно?
Хорошо, так держать)
О, норм) Так куда веселее)
Благодарочка, теперь звук в норме!!!) До этого приходилось скачать и через VLC плеер на 200% выкрутить
@@getFrontend что-то пошло не так)
Звук хорош)
Урок полезный. Благодарю. Вдвойне приятно что ты ещё и земляк
Давно хотел начать изучать gsap вот твой ролик сохранил думал когда посмотрю и вот наступил время все четко спасибо за полезный ролик 🎥👨💻
Спасибо. Побольше уроков для новичков. Берегите себя, автор. С наступающим новым годом вас.
взаимно)
Топовый видос. Спасибо большое!
благодарочка)
круто вийшло !!!!
добре що вийшло)
Привет!!! Рад что всё норм, хорошие уроки.
благодарю)
Хорошее подробное видео, то что надо, Лайк!
Спасибо большое за видео 😌
Чудово, навіть така невеличка частина ліби але так ефектно.Дякую
cool
Как-то пробовал jsap в работе. Красиво конечно получается, но вылез геморой: перестала работать внутристраничная навигация. Если будете пробовать, поймете о чем я. Пришлось ее тоже через jsap реализовать, вроде плагин ScrollTo использовал для этого.
Короче для себя я решил, что это прикольная вещь если делаешь свой блог или какой-нибудь лендос для мероприятия. Но не для серьезных бизнес проектов.
P.S. это только мое мнение. В целом библиотека норм.
Возможно я просто с какой-то старой версией работал. Потому что мне там пришлось body еще в две дополнительные блока-обертки засунуть чтобы все заработало
Дуже дякую за такий чудовий урок! Навіть мені, новачку, все зрозуміло! Сподіваюсь ще побачити багато таких чудових відео від Вас! ))
дякую!
Щось точно буде)
очень классно, давай еще ролики по treejs)
Хотел начать изучать 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 не буду из-за возможности поддержки и оптимизации кода
ну если делать базовые какие-то вещи, то можно действительно через intersectionObserver, но библиотека GSAP дает куда больше возможностей, елси нужно сделать что-то интересное)
@@lets_try_js согласен, но зачастую супер сложных анимации не нужно, ведь главное конверсии а не аттракцион анимации. Все упирается в пользовательский опыт. Вот если бы все браузеры начали поддержку scroll timeline, gsap по большей части умер... Но в принципе можно сказать можно использовать анимации только для пользователей хром а остальные пусть смотрят статику, по примеру Apple, анимация на сайте работает только с устройств на IOS, на Виндоус анимации не работают
жду следующий видос про гринсок и скролл анимацию
уже в следующем году)
А вы можете прикреплять файл с готовым кодом урока, чтоб мы могли скачать и тренироваться вместе с вами?
как показывает практика - если есть готовый код то ты ничему не научишься... только практика, только хардкор
а начальный код можете прикреплять, чтоб дальше джаваСкрипт делать с вами. Или макет
@@lets_try_js Поддерживаю! Вы правы на 100%
Не ленись сам напечатать в следующий раз скопипастишь😂
все красиво, но как оно на мобильных устройствах будет? В наше время около 80% если не больше заходят в интернет с мобильных
На мобилках отключается обычно
Да, на мобильных по умолчанию эти анимации отсутствуют )
А почему она на мобилках не работает?
@@lets_try_js у меня на телефоне все анимации работают по умолчанию, как их можно отключить?
@@deny_channel в каком-то из роликов про GSAP я рассказываю как это сделать. пересмотри
Просто топчик
Можно макет если есть
нет макета, просто накидал в HTML сразу
Спасибо за хороший контент. Я написал вам на эл.почту. Буду рад сотрудничать с вами.