Delaying horizontal and vertical scroll effects differently

[dcp3450]

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.

 

 

[GreenSock]

Welcome to the forums, @dcp3450! It looks like you're using ScrollMagic which is NOT a GreenSock product and it's pretty old. I'd HIGHLY recommend switching to GreenSock's very own ScrollTrigger plugin which does everything ScrollMagic can do, plus a LOT more...and it's even smaller. I think you'll love it. 

 

See

 

If you still need help once you switch to ScrollTrigger please provide a minimal demo so we can see what's going on in-context and give you the best help we can. 

 

Happy tweening/scrolling!