biscuitcleaver

Thanks Rodigo, this was really helpful! It's odd, I've been using TweenLite for years, but never thought about using anything for TimelineLite. With Flash I always just animated on the timeline. Now that I have switched to JS, it's really opening my eyes to what it can do. It's really great!

This is very similar to what I'm looking for - basically I want to build a roll over state that scales up a div. Then play a looping animation, then on roll out reverse the whole thing without playing all of the loops again. I did something similar to the approach below. The problem is that when I play reverse, it's going through all of the loops again where I just want it to go back to the first state. Is this possible? var timeline1 = new new TimelineMax(); var timeline2 = new new TimelineMax({repeat: -1}); timeline2.add(TweenLite.to('#smallerDiv', .5, {left: 20}); timeline2.add(TweenLite.to('#smallerDiv', .5, {left: 0}); timeline1.add(TweenLite.to('#div', .5, {scaleX:1.5,scaleY:1.5}); timeline1.add(timeline2); timeline1.add(TweenLite.to('#div', .5, {scaleX:1.0,scaleY:1.0});