[Delaying horizontal and vertical scroll effects differently]

I have a pretty simple animation I'm working. Basically I have a div that, when comes into view it get 100% as the user scrolls. That animation triggers another to animate to 100% height, etc. Basically creating this line that walks the user through a page. 

 

    var controller = new ScrollMagic.Controller();

    var tl = new TimelineMax();

    tl
    .to('.lemon .bar .primary-bar', 1, {width: '100%', ease: Linear.easeNone})
    .to('.lemon .vertical-bar .primary-bar', 1, {height: '100%', ease: Linear.easeNone})
    .to('.berry .vertical-bar-right .primary-bar', 1, {height: '100%', ease: Linear.easeNone});

    var howItWorksScene = new ScrollMagic.Scene({
      triggerElement: '.lemon .bar',
      duration: "100%",
      triggerHook: .5,
      offset: -($('header').outerHeight() + 100)
    })
    .setTween(tl)
    .addTo(controller);

As you can see above, when .lemon .bar comes into view half way into the viewable are it triggers the animation. That point the .primary-bar animates 100% width as the user scrolls. When that completes the .vertical-bar animations down 100% height.

 

My assumption was I could set the vertical animations to a duration of 2 instead of 1 causing it to be have the speed. However, when I do that it makes the first animation much faster.