ScrollMagic : JQuery element is not working for triggerElement

Question

As the documentation

The value for triggerElement will be a selector, DOM object or jQuery Object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).

But I think this is not OK for my case.

My HTML looks like

....
<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>
....

I'd like to animate when user was scroll into repective section. Below is my JS code snippet.

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

I always get the error in my firefox developer console

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

How should I figure it out to work fine ?

I think I should itrate `childElems` also. – Cataclysm Aug 03 '17 at 07:23 — Cataclysm, Aug 03 '17 at 07:23

score 0 · Answer 1 · answered Aug 03 '17 at 07:56

I should iterate childElems also. Below is my working code for later reference.

  $("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);
    });

  });

ScrollMagic : JQuery element is not working for triggerElement

1 Answers1