Как сейчас реализована анимация:
У вас есть 50 срендереных картинок анимации вроде этой и каждые n милисекунд меняется номер картинки
В таком виде реализации вы ограничены по плавности анимации именно количеством таких кадров и в целом больше ничем
Как можно сделать лучше:
Вариант 1.
Анимация станет плавнее, если просто будете вопроизводить ее в 60 fps.
То есть просто поменяете код для смены аттрибута src на что-то такое:
let i = 0;
let a = setInterval(()=>{
document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp";
i = (i + 1) % 49;
}, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду
Минусы: из-зи увеличения fps таким способом увеличится и скорости анимации
Вариант 2.
Cделать не 50 типовых картинок, а 100 и менять их способом из варианта 1 c фпс в два раза выше чем сейчас
Тогда удастся сохранить и скорость анимации и сделать плавнее
Минусы: много работы (придется переделывать раскадровку всей анимации) + упадет скорость сайта из-за того что придется загружать в два раза больше картинок
Вариант 3.
ВОЗМОЖНО самый удачный, но ТОЧНО самый сложный и требующий много сил. Используйте вместо картинок вида
canvas и библиотеку three.js (тут уже как-то самому придется разбираться, советов дать не могу, потому что сам недостаточно работал с этой библиотекой
Минусы: вполне вероятно, что из-за того что на сайт добавится +1 библиотека, а также 3д модельки скорость сайта будет не сильно отличаться от второго варианта.
Плюс по сравнению с вариантом № 2: Вы получите полную свободу в управлении этой анимацией. Сможете когда надо замедлить, когда надо ускорить без лишней работы
В целом скорость сайта не должна стать большой проблемой, потому что это не первый экран и даже не самое важное в карте. Соответственно можно что-то подгрузить попозже, что-то пораньше, что-то вообще не подгружать если слабый инет
Иными словами, загружать эту анимацию только после того как загрузили все остальное
В общем я постарался понятно расписать минусы и плюсы. Плюс многое зависит от того, как сделана эта штука у ваших дизайнеров
Если что-то непонятно объяснил - спрашивайте
Простой
