When Apple introduced iOS 7 and its flat design, it also changed the animations throughout the system to give UI elements a more natural feel when they move. They did this by changing the animation’s timing curve to a spring, instead of the usual ease-in or ease-out.

I’ve adopted the spring animations in some of Secrets’s UI elements, and a while back I wanted to run an animation in reverse, as if the user was undoing what had just happened. Normally, I would just switch ease-in with ease-out or vice versa and it would feel right, but spring animations are highly asymmetrical and there’s no “reverse spring” animation at hand…

Since I was using CASpringAnimation directly I started playing with autoreverses and beginTime to see if I could trick Core Animation to run the animation in reverse but for one reason or another this never really worked just right. After some toying around I finally found the answer, and it was underneath my nose the entire time… literally.

There’s this old but still awesome post about animation timing I read years ago, and it includes a handy cheat sheet that I printed and have it on my desk since then. I hadn’t felt the need to pick it up in quite some time because I thought I already mastered all those animation properties, or at least the ones I used often. I finally decided to pick it up to see if I was missing something, and sure enough:

springAnimation.speed = -1;

Simply use a negative speed to run the animation in reverse, and that’s it!

Back to posts