javascript - 如何使用 GreenSock 和 ScrollMagic 在每个循环中定位子级

Question

我希望能够通过使用each()循环让具有.fade-in类的每个div以其子级h1(向右滑动)和span(向左滑动)为目标。所以我的问题是如何使用“this”定位子元素，例如 tl.from('.fade-in h1', 1, {x: 300}) 将 .fade-in 替换为 "这个”？

tl
  .from(
    ".fade-in h1",
    0.3,
    { autoAlpha: 0, scale: 0.5, x: 300, ease: Linear.easeNone },
    "x"
  )
  .from(
    ".fade-in span",
    0.3,
    { autoAlpha: 0, scale: 0.5, x: -300, color: "red", ease: Linear.easeNone },
    "x"
  );

Demo Link

Answer 1

试试这个

查看演示 Here

// init controller
var controller = new ScrollMagic.Controller();

// loop through all elements
$(".fade-in").each(function() {
  var jh1 = $(this).find("h1");
  var jspan = $(this).find("span");
  var tl = new TimelineMax();

  tl
    .from(
      jh1,
      0.5,
      { autoAlpha: 0, scale: 0.5, x: 300, ease: Linear.easeNone },
      "x"
    )
    .from(
      jspan,
      0.5,
      {
        autoAlpha: 0,
        scale: 0.5,
        x: -300,
        color: "red",
        ease: Linear.easeNone
      },
      "x"
    );

  // build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    offset: 10,
    triggerHook: 0
  })
    .setTween(tl) // trigger a TweenMax.to tween
    .addIndicators()
    .addTo(controller);
});