GreenSockとScrollMagicを使って各ループ内の子供をターゲットにする方法

Question

.fade-inのクラスで各divを子供h1（右にスライド）とスパン（左にスライド）にするには、 each（）ループ。だから私の質問は、どのように 'this'を使って子要素をターゲットにするのですか？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); 
});