Как встроить на сайт сложную 3d анимацию?

Ага, еще и пол магабайта гсапа, который платный, подтянуть. Выше решение на стилях.

profesor08,

пол магабайта гсапа

- 80кб,

который платный

- бесплатный,
и

решение на стилях

которое не подойдёт для реального заказа, хотя бы потому что спрайт даже из 60 кадров нормального размера будет тормозить при переключении

its2easyy, бесплатный для некоммерческого использования. А если зарабатываешь денежки, то прайс от $100 до $200 в год.

- 80кб, ну может быть ситуация стала лучше, но это не 17кб как у animejs, но и не то, и не то, тут не надо. Максимум что тут надо, это четверть килобайта js кода для реализации интерактива.

которое не подойдёт для реального заказа, хотя бы потому что спрайт даже из 60 кадров нормального размера будет тормозить при переключении

А это откровенные глупости. В любом случае надо будет загрузить все данные. Но гораздо проще и быстрее загрузить 1 файл, нежели 60 файлов. А перерисовкой блока с картинкой будет заниматься графический процессор, и при этом не будет перерисовки всего лэяута, что непременно случится, если будешь менять картинки или подставлять src, а подставляя src, у тебя каждый раз будет инициализироваться http запрос, хорошо если в кеш.

profesor08, https://greensock.com/standard-license/
чтобы бесплатная лицензия стала платной автору нужно создать продукт и продавать его по лицензии разным юзерам, создание просто сайта даже за деньги под платную лицензию не попадает.

А это откровенные глупости.

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

и при этом не будет перерисовки всего лэяута, что непременно случится, если будешь менять картинки или подставлять src, а подставляя src, у тебя каждый раз будет инициализироваться http запрос

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

80кб, ну может быть ситуация стала лучше, но это не 17кб как у animejs,

- автор пишет что до этого не работал с анимациями, в таком случае лучше взять плагин в котором точно можно реализовать всё что будет нужно, а потом при желании заменить на легкое решение, уже понимая что нужно, а что нет. Тем более что нужна привязка состояния анимации к скролу (если я правильно понял по вопросу), что делает scrolltrigger, и чего нет в animejs. Без привязки к скролу можно убрать gsap и останется 16кб

its2easyy, на канвасе можно рисовать спрайт, а точнее только его часть. Объем кода ~ пол килобайта. И для этого не надо грузить 60 картинок, не надо дожидаться когда они загрузятся, не надо грузить лишние библиотеки ради одного мелкого кейса. А так как автор не имел дела с анимацией, неплохо бы ему разобраться в этом вопросе и иметь представление что на самом деле надо делать, а не вникать в код посторонних либ, которые ни каким образом не прояснят вопрос.