How Apple Perfected Animations?

Vinayak Bharadwaz
4 min readOct 31, 2024

--

A pretty thumbnail for the blog

It’s a no-brainer fact that for anyone who’s using any Apple product, be it the Mac, iPad or the ever-popular iPhone, one thing that is extremely common for those devices is the fact that how smooth they feel to use and how perfect the animations look. But how has Apple perfected animations on all their devices? Is there any sorcery behind it? Or it’s just simple attention to detail? In this read, we’re going to unfold all that…

Cheeky Backstory:

13 years after his demise, the world has unfurled the fact that Steve Jobs was a genius. While he might have started his company with an illegal phone line tapper, he showed his genius, when it came to design and experience. The movies on him well-described the fact that how fanatic he was regarding what would make a product feel the best, even if it wouldn’t be visible at all. The best example would be the fact that he fired an employee for not having enough fonts for the 1984 Macintosh. But his eccentricity paid off. He was able to create systems, which would not only look the most modern during the time but would also have the most intuitive meaning of adoption. And to this date, his $3 trillion legacy follows along. A legacy so profound, that the company is now synonymous with its best-out-of-the-box experience.

Attention to Details:

When it came to groundwork, the team over at Apple always seemed to revert to the same old inspiration, which inspired its leader — “nature”. While seemingly very unobstructed, nature is what inspired most of the design choices over at Apple. Be it the water-inspired ‘aquamorphic’ design from MacOS X or the famous physical world-inspired ‘skeuomorphic’ design for first-gen iOS. And this was what was reflected onto the animations over at Apple’s operating systems. Alongside it, being a sister company to Disney due to Pixar, Apple also brought over some easter eggs all the operating systems for a fun touch. The most famous of all would be the genie animation from macOS, which was a direct homage to the genie from Disney classic, the “Alladin”. But for most of the remaining parts of the operating systems, Apple stuck with the real world and made physics-made animations, which would feel as if the interface were alive. On top of it, they also incorporated the importance of frame rate optimisations, which made the animations look just as same as on both 120 & 60 Hz panels on devices, if not a tad bit smoother on the latter. It’s a no-brainer that they meticulously developed contextual animations for each interface element so that they would feel different but very seamless over the whole experience. They went with contextuality to such heights that Apple also releases a yearly ‘Human Interface Guideline’ document to ensure that all developers making apps for Apple’s platforms follow their standard of interaction & make a seamless experience even for third-party apps alongside their own animations for micro-interactions.

Genie Animation on Mac | Source: MakeUseOf

Vertical Integration:

Now as it’s established how Apple designs their animation, let’s talk about what runs it — ‘the hardware’. A few years ago while Apple was considered in the market in terms of animations, as per today’s standard, they would be very bland. This was very much because of the hardware. Even when the first iPhone was released, the experience was stable but not tastefully animated & this was because of the limitation of the hardware back then. But with time, Apple went all in to create custom pieces starting from encryption modules & haptic motors to now producing custom silicon to power their devices. This allowed them to have complete control over which part could be optimised for a specific task. This is what peak vertical integration looks like & this is what allowed them to bind the fluidity of their software with the efficiency & responsiveness of their hardware. Talking about animations in particular, the Cupertino-giant went the extra mile to even create a custom animation engine in their silicon, which solely focused on making the animations better in their software as per the demand of the user in real-time making it exceptionally smooth and fluid every time the action for the animation took place.

Remaining Stuff:

We’ve discussed the fundamentals that Apple have been using all these years to perfect those animations but there are the small bits and bytes left in the equation, which make those even more better than before. And that is all because of ‘easing curves’. As a concept, easing curves are modifiable graphs, which describe the rate of change of a parameter over time, the parameter being the change in animation, which makes the animation more natural to feel. While there are multiple types of curves being used in the industry like cubic-bezier, linear, step functions & so on, the one used by Apple is the ‘cubic-bezier’ curve as it allows for custom timing functions, allowing each interface element to be custom-animated and geared towards the optimised Apple experience. While there might be more to how Apple would even further fine-tune their animations, these fundamentals have been crucial to making the Apple experience as we know & love it today. But with rising competition, Apple might not be the leader very soon as Oxygen OS 15 from OnePlus and OneUI 7 from Samsung are promising in terms of the overall experience. But time will tell what we should be waiting for. Till then, it’s an undoubted fact that Apple did perfected animations!

--

--

No responses yet