Как правильно пользоваться функцией onScroll встроенной в anime.js?

Question

[Саша]

Что есть, есть подключенная Anime.js к html, который содержит контейнер, в нем в свою очередь элементы, которые хочу анимировать, анимация должна начинаться ровно в момент когда скролл дойдет до контейнера с элементами
вот кусок
html

<ul class="stages__list">
						<li class="stages__item">
							<div class="stages__number"></div>
							<picture class="stages__img">
								<source
									media="(min-width: 1200px)"
									srcset="
										https://stblizko.ru/assets/cms_assets/master_nsk_img_stages_1_d.jpg
									"
								/>
								<img
									src="https://stblizko.ru/assets/cms_assets/master_nsk_img_stages_1_m.jpg"
									alt="дизайн"
								/>
							</picture>
							<div class="stages__content">
								<h3 class="stages__name">Дизайн-проект</h3>
								<span>
									Вместе с вами подберем комплектацию, форму, материалы и цвета
									мебели. Сделаем детализированный проект с учетом всех ваших
									пожеланий и особенностей планировки вашего дома.
								</span>
							</div>
						</li>..........

ну и скрипт

<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>

<script>

const { animate, utils, onScroll} = anime  ;

animate('.stages__number', {
  x: '15rem',
  rotate: '1turn',
  duration: 2000,
  alternate: true,
  loop: false,
  ease: 'inOutQuad',
  autoplay: onScroll({
    container:'.stages__list',
  })
});

</script>

Что происходит сейчас - анимация просто начинается сразу , без и вне зависимости от прокрутки вообще
хочу сделать средствами именно Anime.js.

Answer 1

[catch-a-chalk]

Доброго времени суток. Попробуйте не передавать onScroll параметру autoplay, и вообще вместо этого использовать IntersectionObserver:

<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        
        anime({
          targets: '.stages__number',
          translateX: '15rem',
          rotate: '1turn',
          duration: 2000,
          easing: 'easeInOutQuad'
        });
        
        observer.disconnect();
      }
    });
  });
  
  observer.observe(document.querySelector('.stages__list'));
  
});
</script>

Comments

[Саша]

Спасибо за ответ! но он противоречит вопросу. Сделать анимацию я могу , хочу понять в чем ошибка именно в onScroll, тк я иду четко по документации