Пересечение Observer не работает ниже 600px viewport (+ GSAP)

Question

У меня проблема с анимацией контента. Все работает нормально, но когда я делаю адаптивный веб-сайт и ширину области просмотра меньше 600 пикселей, мой пересечение Observer не работает. Ничего не случилось.

Я добавляю console.log в IO, и в консоли ничего не появляется, когда я прокручиваю свой веб-сайт. Когда я прокручиваю, когда ширина больше 600 пикселей, я вижу IO в консоли.

Может быть, кто-то знает решение этой проблемы?

Мой код:

//global
const slideDuration = 1;

// scroll animation
let target = document.querySelectorAll("section");
const options = {
 root: null,
 threshold: 0,
 rootMargin: "-300px"
};

const contentAnimation = (left, right) => {
  gsap
    .timeline()
    .from(right, { opacity: 0, duration: slideDuration, x: 400 })
    .from(left, { opacity: 0, duration: slideDuration, x: -400 }, "-=0.5");
};

 const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
  //show content
  const getElement = entry.target.className;
  const contentElement = document.querySelector(`.${getElement}__content`);
  contentElement.style.opacity = "1";

  //animation
  const right = document.querySelectorAll(`.${entry.target.className}-right`);
  const left = document.querySelectorAll(`.${entry.target.className}-left`);

  contentAnimation(left, right);
  io.unobserve(entry.target);
}
  });
}, options);

target.forEach(section => {
  io.observe(section);
});

Answer 1

У вас есть rootMargin: "-300px". Это означает, что пересечение не начнется, пока вы не наберете 300px с любой стороны. Когда область просмотра меньше 600 пикселей, больше нет элемента для пересечения, следовательно, он не работает.

См. документ наблюдателя пересечения для получения дополнительной информации.