ScrollMagic: élément JQuery ne fonctionne pas pour triggerElement

Question

Comme la documentation

La valeur triggerElement sera un sélecteur , objet DOM ou jQuery objet qui définit le début de la scène. Si elle n'est pas définie, la scène commencera au début de la page (sauf si un décalage est défini).

Mais je pense que ce n'est pas OK pour mon cas.

Mon HTML ressemble

.... 
<section> 
    <div class="scrollMagic"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
    et dolore magna aliqua. Ut enim ad minim veniam.   
    </div> 
    <div class="scrollMagic"> 
     <img src="abc1.jpg" width="100px" > 
    </div> 
</section> 
<section> 
    <div class="scrollMagic"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
    et dolore magna aliqua. Ut enim ad minim veniam.   
    </div> 
    <div class="scrollMagic"> 
     <img src="abc2.jpg" width="100px" > 
    </div> 
</section> 
<section> 
    <div class="scrollMagic"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
    et dolore magna aliqua. Ut enim ad minim veniam.   
    </div> 
    <div class="scrollMagic"> 
     <img src="abc3.jpg" width="100px" > 
    </div> 
</section> 
.... 

Je voudrais animer lorsque l'utilisateur a été défilement dans la section biais les conventions. Voici mon extrait de code JS.

var scrollMagicController = new ScrollMagic.Controller({ 
    globalSceneOptions: { 
     duration: 100 
    } 
    }); 

    $("section").each(function(index, elem) { 
    var tween = TweenMax.to(elem, 1, { 
     ease: SlowMo.ease.config(0.7, 0.7, false), 
     opacity: 1, 
     repeat: 1 
    }); 

    var childElems = $(elem).find(".magicScroll"); 
    var scene = new ScrollMagic.Scene({ 
     duration: 200, 
     triggerElement: childElems, 
    // offset: -500 
    }).setTween(tween).addTo(scrollMagicController); 
    }); 

je reçois toujours l'erreur dans ma console développeur de Firefox

12:11:02:444 (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found: 

Comment dois-je le comprendre pour fonctionner correctement?

Answer 1

Je devrais également itératif childElems. Voici mon code de travail pour référence ultérieure.

$("section").each(function(index, elem) { 
    $(elem).addClass("animate-container" + index); 
    var tween = TweenMax.to(".animate-container" + index, 1, { 
     ease: Back.easeInOut.config(1.7), 
     opacity: 1, 
    }); 

    var childElems = $(elem).find(".magicScroll"); 
    $(childElems).each(function(innerIndex, childElem) { 
     $(childElem).addClass("animate" + innerIndex); 
     var scene = new ScrollMagic.Scene({ 
     tweenChanges: true, 
     triggerElement: ".animate-container" + index + " .animate" + innerIndex, 
     offset: -300, 
     reverse: false, 
     }).setTween(tween).addTo(scrollMagicController); 
    }); 

    });