title: ScrollMagic : JQuery element is not working for triggerElement
body: <p>As the documentation</p>
  
  <blockquote>
    <p>The value for <code>triggerElement</code> will be a <strong>selector, DOM object or jQuery
    Object</strong> 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).</p>
  </blockquote>
  
  <p>But I think this is not OK for my case.</p>
  
  <p>My HTML looks like</p>
  
  <pre><code>....
  &lt;section&gt;
      &lt;div class="scrollMagic"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
      et dolore magna aliqua. Ut enim ad minim veniam.        
      &lt;/div&gt;
      &lt;div class="scrollMagic"&gt;
          &lt;img src="abc1.jpg" width="100px" &gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="scrollMagic"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
      et dolore magna aliqua. Ut enim ad minim veniam.        
      &lt;/div&gt;
      &lt;div class="scrollMagic"&gt;
          &lt;img src="abc2.jpg" width="100px" &gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="scrollMagic"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
      et dolore magna aliqua. Ut enim ad minim veniam.        
      &lt;/div&gt;
      &lt;div class="scrollMagic"&gt;
          &lt;img src="abc3.jpg" width="100px" &gt;
      &lt;/div&gt;
  &lt;/section&gt;
  ....
  </code></pre>
  
  <p>I'd like to animate when user was scroll into repective section. Below is my JS code snippet.</p>
  
  <pre><code>  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);
    });
  </code></pre>
  
  <p>I always get the error in my firefox developer console</p>
  
  <pre><code>12:11:02:444 (ScrollMagic.Scene) -&gt; ERROR: Element defined in option "triggerElement" was not found:
  </code></pre>
  
  <p>How should I figure it out to work fine ?</p>