Использование IntersectionObserver для запуска анимации gsap при просмотре - PullRequest
Новая
       74

Использование IntersectionObserver для запуска анимации gsap при просмотре

1 голос
/ 18 марта 2020

https://codepen.io/OscarTBeamish/pen/1130adf7066be1a390a3cb4d9c46f212

Я зацикливаюсь на элементах класса animate, затем добавляю временную шкалу к каждому, а затем использую IntersectionObserver для воспроизведения анимации при просмотре. 

    // Intersection observer stuff
    var callback = function (entries, observer) {
        entries.forEach(function (entry) {
            if (entry.intersectionRatio > 0) {
                entry.target.timeline.play();
            }
        });
    };
    var observerOptions = {
        rootMargin: '100px',
        threshold: 1.0
    };

    var observer = new IntersectionObserver(callback, observerOptions);

    // Animation logic
    var animations = document.querySelectorAll(".animate");
    animations.forEach(function (el, index) {
        masterTL = new TimelineLite({
            paused: true
        });
        var tl = new TimelineLite();

        if($(el).hasClass('background')) {

            tl.to(el, {
                ease: 'power2.inOut',
                x: 0,
                duration: 1
            })
            // return
            masterTL.add(tl);

            el.timeline = masterTL;
        }

        else {
            tl.to(el, {
                ease: 'power2.inOut',
                y: 0,
                duration: .6
            })
            .to(el, {
                ease: 'power2.inOut',
                opacity: 1,
                delay: -.5,
                duration: .5,
            })

            masterTL.add(tl, index * 0.02);

            el.timeline = masterTL;


        }
        // console.log('still goin');

        observer.observe(el);

    });

Мне удалось сделать это успешно в тексте, но затем я хочу вызвать другую анимацию движения, когда элемент также имеет класс 'background'.

Некоторая помощь может быть удивительной, сама идея может быть неправильной для начала. По сути, я просто хочу запускать разных подростков в классе.

1 Ответ

0 голосов
/ 19 марта 2020

Проблема здесь в том, что ваш элемент никогда не соответствует пороговому значению наблюдателя пересечения, поскольку у вас есть transform: translateX(-100%), даже когда родительский раздел прокручивается до.

Таким образом, вы, вероятно, должны либо

  1. Используйте другой элемент в качестве триггера для этого элемента, который виден (моя рекомендация).
  2. Измените -100% на что-то вроде -99% и измените порог значение чего-то (например, 0), чтобы оно соответствовало требованиям.
  3. Использование второго наблюдателя пересечения с другими параметрами для пересечения только с проблемным элементом c.

Примечание: вы должны использовать gsap вместо TimelineMax / TweenMax шт. Это из GSAP 2. См. примечания GSAP 3 для получения дополнительной информации. Ваш код немного очищен (без реализации перечисленных выше предложений): 

// Intersection observer stuff
var callback = function (entries, observer) {
  entries.forEach(function (entry) {
    if (entry.intersectionRatio > 0) {
      entry.target.timeline.play();
    }
  });
};
var observerOptions = {
  rootMargin: '100px',
  threshold: 1.0
};

var observer = new IntersectionObserver(callback, observerOptions);

// Animation logic
var animations = document.querySelectorAll(".animate");
animations.forEach(function (el, index) {
  el.timeline = gsap.timeline({paused: true});

  if(el.classList.contains('background')) {
    el.timeline.to(el, {
      ease: 'power2.inOut',
      x: 0,
      duration: 1,
    })
  }

  else {
    el.timeline.to(el, {
      ease: 'power2.inOut',
      y: 0,
      duration: .6
    })
    .to(el, {
      ease: 'power2.inOut',
      opacity: 1,
      delay: -.5,
      duration: .5,
    })
  }

  observer.observe(el);

});
...