title: Triggering a video autoplay based on scroll position
body: <p>I am writing a script that uses the Wipe animation from the scrollorama.js script. I am hoping to be able to implement a video to autoplay at certain markers in the scroll depth: ie, when a video page has wiped out another, and is now fully viewable.  I have figured out how to measure scroll depth, i am successfully logging it in my console. I have figured out how to measure how deep i have scrolled, but maybe i am so tired, i don't know how to ask the video to play automatically at the scroll depth. I hope this is a legal question, and that I can get some assistance. Has anyone out there tried this before?  Here is the code thus far. </p>
  
  <p><code>enter code here</code> $(document).ready(function() {</p>
  
  <p>$(window).scroll(function(e) {</p>
  
  <pre><code>  var scrollAmount = $('body').scrollTop();
    console.log(scrollAmount);
  </code></pre>
  
  <p>});</p>
  
  <pre><code>    var controller = $.superscrollorama();
      var pinDur = 800;   
      // create animation timeline for pinned element
  var pinAnimations = new TimelineLite();
  
  //pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
  pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
  pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) 
  pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
  pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
  pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
  //pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
  
  
  controller.pin($('#content_wrapper'), pinDur, {
      anim:pinAnimations, 
      onPin: function() {
          $('#content_wrapper').css('height','100%');
      }, 
      onUnpin: function() {
          $('#content_wrapper').css('height','1000px');
      }
  
  
  });
  
  });
  </code></pre>