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