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.