I'm playing my animations like this,

tl = new TimelineMax({paused:true});

tl.to(DOM_ELEMENT_TOP,1,{left:100},ease:Linear.easeIn);
tl.to(DOM_ELEMENT_BOTTOM,1,{top:100},ease:Linear.easeIn);

tl.play();

How do i reset the DOM elements to their original positions after the animation has finished playing?

I want to do this without reversing the animation itself (obviously!)

I'm playing my animations like this,

tl = new TimelineMax({paused:true});

tl.to(DOM_ELEMENT_TOP,1,{left:100},ease:Linear.easeIn);
tl.to(DOM_ELEMENT_BOTTOM,1,{top:100},ease:Linear.easeIn);

tl.play();

How do i reset the DOM elements to their original positions after the animation has finished playing?

I want to do this without reversing the animation itself (obviously!)

• javascript
• gsap

1 Answer 1

Looks like there are some typos in your code - the ease belongs inside the vars object:

tl.to(DOM_ELEMENT_TOP, 1, {left:100, ease:Linear.easeIn});
tl.to(DOM_ELEMENT_BOTTOM, 1, {top:100, ease:Linear.easeIn});

And then if you want to revert things to where they started, you can simply jump to the beginning like:

tl.pause(0);

Or, if you want to literally clear the top/left property from the inline CSS, you can do:

TweenLite.set(DOM_ELEMENT_TOP, {clearProps:"left"});
TweenLite.set(DOM_ELEMENT_BOTTOM, {clearProps:"top"});