Комментарии 6
Юзаю связку ScrollMagic + anime.js. Т.к. гибко и бесплатно. Для 95% проектов подходит.
До этого scrollreveal юзал и greensock.
Эпизодически юзаю tree.js и d3.js. Глобусы на них делал со специфическими штуками.
Lottie проигрыватель тоже очень выручает со сложной анимацией. Когда её профаниматор делает. Но вот длинная и многообъектная анимация сильно комп нагружает. Поэтому в таких случаях видос с контролем таймлайна помогает. Т.е. в видео сложная анимация, а параллельно с ней простая синхронно идёт, если нужен интерактив.
А где rive в этом списке?
А можно опрос добавить: "Вам нравятся такие анимации на сайте или нет"?
Это ведь не только раздражающие сайты делать
На tree.js делал интерпретацию научных данных - графики трехмерные. Такое сделал сто лет назад на Delphi 7 (там был компонент хороший для этого дела. А дистр конечно с рутрекер), но года три назад просили пару фичей добавить и выбор уже в пользу web-фреймворка.
Личное мнение: скорее раздражает, чем нет.
На смартфонах анимации штука приятная, если сделано грамотно, т.е. не тормозит, и не замедляет слишком сильно переходы по интерфейсу. На практике таких примеров на весь рынок 1,5 штуки - почти у всех реализации отвратительные, и люди просто выключают анимации или выкручивают их скорость так, чтобы они мгновенно проскакивали.
На десктопах полностью аналогично: есть примеры, где это можно сделать красиво и приятно, например на kde с современным железом. Но в большинстве случаев, особенно из коробки, анимации реализованы ужасно, и их выключают.
С браузерами таже история: почти все рализации анимаций на сайтах ужасны и неудобны, доставляют только дискомфорт. Только анимации на браузерах не только замедляют интерфейс, но и натурально заставляют железо взлетать на вентиляторах охлаждения, или высаживают батарейку на глазах. Особенно мерзко выглядят сайты больших брендов с огромными бюджетами, где вся главная страница одна сплошная анимация, и тяжела не только вычислительно, но и натурально странички весит под сотню мегабайт, что даже просто прогрузить проблематично. Вот если делать простенькую анимацию, которая бы не сильно грузила железо, не слишком бросалась в глаза, и не тормозила интерфейс и переходы по нему - вот такой анимации цены бы не было. Но с браузерами в этом плане большие сложности: мало того что они сами по себе тормозят, так еще и у посетителей слишком большой зоопарк железа, от стареньких смартфонов на первых версиях андроида до современных флагманов, и этот факт большинство сайтов упорно не учитывает. Дополнительно посетителей злит тот факт, что они никак не могут влиять на анимации в браузерах, нет интерфейса чтобы их ускорить или хотя бы отключить, как в случае с анимациями ОС. Так что реализация анимаций на сайтах штука по сути неблагодарная: грамотно сделать сложно, дорого, требуется поддержка огромного зоопарка устройств, и всегда будут недовольные.
Самые полезные библиотеки JS для красивых анимаций