d@ve

I was trying to avoid separating the animations, but it was also an option if I couldn't figure out what was wrong with my first method. I'll test out both methods and see which one works the best. Thanks again.

I guess I'll use this for now. I wish I knew what exactly caused the problem though. Regardless, I appreciate the help Blake, thank you.

I just tried it on the links you posted and on both of those the problem occurred on the first try. I refreshed Plunker and the animation ran fine ( anim.play() and anim.reverse() ) the first two times but failed with the same problem the third time around.

I have an timeline animation that plays when you click the red box. It first sets "display:none" on the #menu div and then continues to animate the #box div. The result is an expanded box with some content in it. To return to the menu you click on the close button on the top right, which will reverse the animation. My problem is that sometimes the animation will break or not complete (I hope I picked the right terms there). So far only three cases have occurred: the animation reverses successfully on reverse, the #box background will not return to it's initial transparent color, and remains blue; leaving an unwanted background color on reverse, the #menu display property is not reset to "display:block", instead it remains "display:none" *note: 2 and 3 occur together, as far as I've seen What I have done to recreate it is just keep refreshing the page, clicking the red box, and exiting the expanded div with the close button. Most of the time it runs fine, but when it doesn't then the user has no access to the menu. Also, the problem sometimes occurs when running the animation over and over, even without a refresh. Any suggestions or insight into what I could be doing wrong?