title: GSAP timeline various onComplete functions on different tweens
body: <p>First of all I'm new with GSAP and ScrollMagic, so forgive me if I might be asking a silly question here. I've been looking over the internet but didn't succeed in finding the right answer for my problem. </p>
  
  <p>Anyways, I'm trying to create a timeline where on the complete of each 'to' function a call to an external function will be made with specific params.</p>
  
  <pre><code>var controller = new ScrollMagic.Controller();
  var timeline = new TimelineLite();
  var div = $('div');
  
  timeline.to(div, 0.5, {
     opacity: 0,
     onComplete: toggleOverlay(0)
  }, "part-1")
  
  .to(div, 0.5, {
     opacity: 1,
     onComplete: toggleOverlay(1)
  }, "part-2")
  
  .to(div, 0.5, {
     opacity: 0,
     onComplete: toggleOverlay(2)
  }, "part-3");
  
  var scene = new ScrollMagic.Scene({
     triggerElement: "#trigger-event",
     duration: 500
  })
  .setTween(timeline)
  .addTo(controller);
  
  function toggleOverlay(i){
     console.log(i);
  }
  </code></pre>
  
  <p>What happens here: The timeline will be called once the scroll position reaches the '#trigger-event'. Subsequently, the '.to' functions will be called based on the scroll position after the trigger event and before the end (duration).</p>
  
  <p>The problem I face here, is that the onComplete functions are called directly on the page load. This has probally something to do with the '.setTween(timeline)', as I can imagine it loads in the whole timeline.</p>
  
  <p>What would be the solution for my problem or what would be an good alternative method?</p>
  
  <p>EDIT: Here's a JSFiddle: <a href="https://jsfiddle.net/04db5ja5/" rel="nofollow">https://jsfiddle.net/04db5ja5/</a></p>
  
  <p>Thanks in regards,
  Enzio</p>