javascript - 使用 IntersectionObserver 在 View 中触发 gsap 动画

Question

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

我循环使用“animate”类的元素，然后为每个元素添加时间线，然后使用 IntersectionObserver 在 View 中播放动画。

    // 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);

    });

我已经成功地在文本上完成了此操作，但是当元素也具有“背景”类时，我想触发不同的补间。

一些帮助将是令人惊奇的，这个想法本身可能一开始就是错误的。我本质上只是想在 View 中触发每个类的不同补间。

Answer 1

编辑:自从这个答案发布后，GreenSock 就出来了 ScrollTrigger这比交叉口观察者更有用。阅读 the docs了解更多!

<小时/>

原始答案

这里的问题是，即使父部分滚动到，您的元素也永远不会满足交叉观察者的阈值，因为您有 transform:translateX(-100%)。

因此，您可能应该这样做

1. 使用不同的元素作为 View 中的元素的触发器(我的建议)。
2. 将 -100% 更改为 -99% 之类的值，并将阈值更改为某个值(例如 0)，以便满足要求。
3. 使用具有不同参数的第二个相交观察器来仅与有问题的元素相交。

<小时/>

旁注:您应该使用 gsap 而不是 TimelineMax/TweenMax 内容。这是来自 GSAP 2。请参阅 the GSAP 3 notes了解更多信息。您的代码清理了一些(没有实现任何上述建议):

// 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);

});