如何使用 GreenSock 和 ScrollMagic 在每个循环中定位 children

Question

我希望能够让每个 div 的 class 成为 .fade-in 的目标 children h1（向右滑动）和跨度（向右滑动）在左边）通过使用 each() 循环。所以我的问题是如何使用 'this' 定位 child 元素，例如 tl.from('.fade-in h1', 1, {x: 300}) 将 .fade-in 替换为 "this"?

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

如何使用 GreenSock 和 ScrollMagic 在每个循环中定位 children

How to target children in a each loop using GreenSock and ScrollMagic

javascript

scrollmagic

gsap