Your Spring Animations Are Bad (And It’s Probably Apple’s Fault)
Mike Rundle

Hey Mike,

After reading your article carefully, I think I understand the problem is that the animation cuts off early unless you choose your values correctly. I recently solved the spring equation so that that will never happen. I detail this solution here. Look for equation 3 and end note 3.

Important Additional Note: I talked to Andy Matuschak on Twitter, the Apple spring implementor you mentioned, and he noted that my equations are not actually real springs yet (I have half the equation implemented in the article). I have worked out a revised formulation that will take a few days to put together, but it will still solve the issue you are having.

I think you’re right that adding mass and stiffness would make springs feel more natural, but I don’t think that’s the right way to do it. Firstly, the elements on the page don’t have a real mass. That is, any mass and stiffness you end up choosing will be the ones that make the spring feel right. A dual way to think about the animation is as follows: Amplitude, oscillation count, damping constant, and animation duration (hereafter AODD). In this formulation, the assumption is that you know some constraints on your spring and want a physical solution that can conform to them. That is to say, the mass, damping, stiffness, initial velocity (MDSV) form is a system input specification, and the AODD form is a system output specification. Both are capable of generating identical curves that are physical solutions to the spring equation. However, I believe AODD is more idiomatic for designing an animation.

I will say however, that if you’re modeling a system with emergent behavior, MDSV is the right way to do it. However, if you’re working with a system that was designed to behave in an exact way, generally you’ll know how long you want the animation to run, and you’ll adjust your spring so that it behaves nicely within that length of time.

I feel a little odd promoting my own stuff here, but I came from the web animation side of things and didn’t know at all about iOS springs. I ended up writing my own JS spring framework that sounds a lot like Apple’s (you set a duration and damping constant) and wrote up the math and implementation here:

I did something you might find interesting, which is I wrote a Grapher gcx file and JS Fiddle that allows you to tweak the damping constant and zero crossings visually and play with the animation duration in a browser. Maybe that will help you guys in iOS world?

Here’s the gcx file and JSFiddle.

Thanks for geeking out about springs as much as I have been Mike! I enjoyed reading your article.


Show your support

Clapping shows how much you appreciated William Silversmith’s story.