jmcn

I'll try and put it on codepen. I want the tweens to work on scroll? right now the .learn-info and .learn-info2 are over lapping.

if i tween two of the elements and comment out the third it works but when i try all three tweens the timing gets thrown off and it doesn't work controller.addTween( '.learn-info', (new TimelineLite()) .append([ TweenMax.fromTo($('.learn-info'), .5, {css:{right: 730}, immediateRender:true}, {css:{right: 0}}) ]), 100 // scroll duration of tween ); controller.addTween( '.learn-info2', (new TimelineLite()) .append([ TweenMax.fromTo($('.learn-info'), .7, {css:{right: 0}, immediateRender:true}, {css:{right: -730}}), TweenMax.fromTo($('.learn-info2'), .9, {css:{right: 730}, immediateRender:true}, {css:{right: 0}}) ]), 1000 // scroll duration of tween ); controller.addTween( '.learn-info3', (new TimelineLite()) .append([ TweenMax.fromTo($('.learn-info2'), .7, {css:{right: 0}, immediateRender:true}, {css:{right: -730}}), TweenMax.fromTo($('.learn-info3'), .9, {css:{right: 730}, immediateRender:true}, {css:{right: 0}}) ]), 2000 // scroll duration of tween );