greensock tweenmax animation

Question

Я работаю над баннером с помощью TweenMax, я хочу прокрутить 5 разделов справа налево и отобразить 3 за раз (за исключением права в начале и в конце в конце). Трудно объяснить, не глядя на результат. Вы увидите, что одновременно отображаются только 2 div.

Please see my codepen

 doAnim = function() {   
     var TL1 = new TimelineMax({repeat:0, repeatDelay:2.5}); 
     TL1.set("#banner", {visibility:"visible"}) 
     .from('#one', 0.9, {left: 300, scale: 0.6, ease: Power0.easeInOut}) 
     .to('#one', 0.9, {left: -200, scale: 0.6, ease: Power0.easeInOut},'+=.1') 
     .from('#two', 0.9, {left: 300, scale: 0.6, ease: Power0.easeInOut},'-=1.5') 
     .to('#two', 0.9, {left: -200, scale: 0.6, ease: Power0.easeInOut},'+=.1') 
     .from('#three', 0.9, {left: 300, scale: 0.6, ease: Power0.easeInOut},'-=1.5') 
     .to('#three', 0.9, {left: -200, scale: 0.6, ease: Power0.easeInOut},'+=.1') 
     .from('#four', 0.9, {left: 300, scale: 0.6, ease: Power0.easeInOut},'-=1.5') 
     .to('#four', 0.9, {left: -200, scale: 0.6, ease: Power0.easeInOut},'+=.1') 
     .from('#five', 0.9, {left: 400, scale: 0.6, ease: Power0.easeInOut},'-=1.5') 
     .to('#five', 0.9, {left: -200, scale: 0.6, ease: Power0.easeInOut},'+=.1'); 
    }; 

Answer 1

Единственный способ достичь этого заключается в изменении относительного времени каждого шага временной шкалы. Попробуйте заменить '+=.1' на '0' и '-=1.5' на '-=1.8'.