Jump to content


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

Recommended Posts

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

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

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  :P

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.