greensock tweenmax animation

Question

I'm working on a banner using TweenMax, I want to scroll 5 divs form right to left and display 3 at a time (except right at the beginning and right at the end). It is hard to explain without looking at the result. You will see that only 2 divs are currently displayed at once.

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

Only way to achieve this is to change relative timing of each timeline step. Try to replace '+=.1' to '0' and '-=1.5' to '-=1.8'.