title: Start two animations at the same time using Scrollmagic
body: <p>I'm using Scrollmagic and GreenSock to create some animations on my page when I scroll to a certain element. I need to start multiple animations at the same time but am struggling to find out how to do so.</p>
  
  <p>See here: <a href="https://codepen.io/adamboother/pen/yGVpLJ?editors=1111" rel="nofollow noreferrer">https://codepen.io/adamboother/pen/yGVpLJ?editors=1111</a></p>
  
  <p>I am setting my Tweens as per below:</p>
  
  <pre><code>var tweens = new TimelineMax()
      .add(TweenMax.to("#left-panel-2", 1, {transform: "translateY(0)"}))
      .add(TweenMax.to("#left-panel-3", 1, {transform: "translateY(0)"}))
      .add(TweenMax.to("#left-panel-4", 1, {transform: "translateY(0)"}))
      .add(TweenMax.to("#left-panel-5", 1, {transform: "translateY(0)"}));
  </code></pre>
  
  <p>However I need to animate the panels on the right hand side at the same time as the panels on the left hand side animate...so they're all in sync. Can anyone shed any light on this please?</p>