ScrollMagic - 总是首先为第一个项目设置动画答案

【问题标题】：ScrollMagic - always animate first item firstScrollMagic - 总是首先为第一个项目设置动画
【发布时间】：2018-11-23 11:13:27
【问题描述】：

有没有办法确保出现的第一个项目总是首先滚动 - 使用此代码？目前它会根据元素的顺序触发。我问是因为元素的顺序在整个站点中发生了变化——我不想为每个不同的场景创建一个新场景。有人可能会看到这样做的聪明方法。感谢您提前提供任何帮助。

$('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  h2 = $(elem).find('h2');
  h3 = $(elem).find('h3');
  btn = $(elem).find('.btn');
  p = $(elem).find('p');
  img = $(elem).find('img');
  span = $(elem).find('span.js-fade-order');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

  .fromTo(span, 0.6, {
    opacity: 0,
    y: "40px",
  }, {
    opacity: 1,
    y: "0",
    ease: Power0.easeInOut
  },  0.3, "start")

    .fromTo(h2, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

    .fromTo(img, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 0.9, "start")

    .fromTo(h3, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.2, "start")

    .fromTo(p, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.5, "start")

    .fromTo(btn, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.8, "start")
   // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
 });

【问题讨论】：

对不起 - 我解决了这个问题

标签： gsap scrollmagic

【解决方案1】：

 $('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

    .staggerFromTo(fadeElem, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

  // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
});

【讨论】：