Dagmar

Just as you wrote this I had come to the same conclusion. But yes, you're entirely right. See my solution above. Thanks for your help. I caused myself a ton of frustration with this one. Marking as solved.

UPDATE: I think I found the solution: Because I am using the .from() tween, setting t1's position to its final position BEFORE killing it, seems to solve the problem. The kill() does not reset the applied transform values on elements! So now my sample code would look something like this: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. // so, instead of t1, we want to run t2 instead // set elements back to where they should be to start another animation t1.seek('-=0', false); // kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2, which should now play t2.play();

Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2 t2.play(); In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with t1.play() before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.