Restore the starting state of an element after calling .from()

[bfred.it]

I need to fully reset an animation to restore its value before TL was even called. I'm not interested in the full state restore, just whatever was rendered by .from()

 

.progress(0, true); works fine with .to() tweens but it will keep the starting values of .from() on the element. 

tl.fromTo("#redBox", 1, {x:550},{x:200}); //this will bring x to 200 on render
tl.progress(0, true).pause(); //this won't bring the value of x to its initial 0

 

Codepen here: 

See the Pen zcjCh by bfred-it (@bfred-it) on CodePen

[GreenSock]

This is expected behavior, and it's rather complicated to explain all the reasons for it, but you have two options:

 

1) set immediateRender:false on your fromTo() tween:

tl.fromTo("#redBox", 1, {x:550},{x:200, immediateRender:false});

2) Use a set() that's not at the very beginning, like offset it by 0.001, and then do a normal to() tween:

tl.set("#redBox", {x:500}, 0.001);
tl.to("#redBox", 1, {x:200});

That way, you're rewinding to a spot BEFORE that value was set (0.001 seconds before in this case). 

[bfred.it]

Thanks! The first one seems to require the 0.001 too, I ended up using it that way. I was hoping to find a method to reset the tween but this works too.

 

I guess that treating tweens at 0 differently makes sense from a performance standpoint, but I found it counterintuitive when trying to reset them. It might just be that I've haven't read every word in the docs though