[Help trying to tween 3 different divs]

I'll try and put it on codepen. I want the tweens to work on scroll? right now the .learn-info and .learn-info2 are over lapping.

[Help trying to tween 3 different divs]

if i  tween two of the elements and comment out the third it works but when i try all three tweens the timing gets thrown off and it doesn't work

 

 

 

 

 

controller.addTween(

 '.learn-info',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info'), .5, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 100 // scroll duration of tween

);

 

 

controller.addTween(

 '.learn-info2',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info'), .7, 

       {css:{right: 0}, immediateRender:true}, 

       {css:{right: -730}}),

     TweenMax.fromTo($('.learn-info2'), .9, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 1000 // scroll duration of tween

);

 

controller.addTween(

 '.learn-info3',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info2'), .7, 

       {css:{right: 0}, immediateRender:true}, 

       {css:{right: -730}}),

     TweenMax.fromTo($('.learn-info3'), .9, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 2000 // scroll duration of tween

);