Instant rotation

[Chris Matus]

Hoping someone can help me with a small issue.

 

I have an arrow in the heading of a collapsible section, in a vuejs app, that I make rotate upon section open and close, using timeline.  The state of the section being open, or closed, is persisted in Local Storage, so, if the browser is refreshed, the section remains as it was.  The challenge is to preserve the position of the arrow too.  The only idea I came up with was, upon component mount, to check if the arrow direction was out of sync with the section’s open state, and, if so, have it instantly rotate to the proper position. Rotation would have to be instant (no motion) so the user perceives the arrow to have remained in its previous position upon browser refresh. I played around with setting timeline duration to a very small decimal number, but there is still some detectable motion. Is there a way to achieve instant rotation?  My searching the docs did not yield any solutions yet.

 

Any ideas?

 

Thank you.

[GreenSock]

You don't have to have any duration at all. You can set() things immediately, or if you want an animation to jump to its end state, you can simply call yourAnimation.progress(1). But I wonder if the "detectable motion" you mentioned has more to do with the fact that the page loads with a particular position in the CSS, and it takes a little time for the JavaScript to be parsed and executed by the browser. If that's the case, it won't matter if the animation jumps immediately to its end state. You'd have to maybe hide the arrow initially in the CSS and then show it in the JS when it executes. Just an idea. If you're still having trouble, please post a reduced test case in codepen and we'd be happy to take a peek.

[Chris Matus]

Thank you @GreenSock. That did the trick!

.progress() is not the most intuitive method name, which is why I missed it, I guess.

 

Appreciate the quick help on a New Year's Eve!  Happy New Year!