如何在TimelineMax(GSAP)中播放后重置原始位置

时间:2015-04-06 12:00:28

标签: javascript gsap

我正在播放这样的动画,

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();

动画播放结束后如何将DOM元素重置为原始位置?

我想这样做而不反转动画本身(显然!)

1 个答案:

答案 0 :(得分:5)

看起来您的代码中存在一些拼写错误 - 轻松属于vars对象:

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

然后,如果你想将事情还原到他们开始的地方,你可以简单地跳到开头,如:

tl.pause(0);

或者,如果你想从内联CSS中清除top / left属性,你可以这样做:

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