The 8 most important UI animations of all time

UI animations are the spice rack of the digital product designer: add too much and you’ll ruin the essence of your creation. But the right amount can bring out its best qualities, communicating complicated new and radical ideas in an instant.

Despite rarely getting their due recognition, animations are a foundational component of any digital experience (and product, including InVision Studio)—and that’s why we’re taking some time to honor the eight most important user interface animations of all time.

They cross time, space, and media but they all have one thing in common: they were each a leap forward in the way we interact with technology and ideas so obvious in retrospect it’s a wonder there was ever a world without them.

1. The blinking cursor (1967)

In the beginning, there was heaven and earth…and the blinking terminal line. The blinking cursor (can we call you Blinky?) is like any true art that withstands the test of time and medium.

First filed as a patent by Charles A Kiesling in 1967, it’s still in use on phones, ATMs, computers, browsers, and surely on things yet to be imagined. It’s the Mona Lisa of UI animations—simple, iconic, and the foundation for an entire genre of artistic expression.

Blinky established a convention we still use today, one letting us know where the “focus” of the screen is and that it’s ready for your input—sometimes, as any writer can attest, even a bit too ready. But, like the most faithful of friends, their persistence only pushes us to be better.

2. The Sega Genesis splash screen (1989)

Every video game console had its opening animation, but none more iconic than the Sega Genesis. In case you missed it, The Sega Genesis was the combative counterpart to the much more buttoned-up 16-bit rival Nintendo’s Super NES, and at every turn, they positioned themselves accordingly.

Sega’s Sonic the Hedgehog had an attitude, while Mario was…a humble bumbling plumber. Sega’s hardware was sleek and black, Nintendo’s grey and bulky. The branding carried through to the first seconds of the user experience.

Each Sega Genesis opening screen for every game was ever-so-slightly different. (Renting a new game from Blockbuster and seeing its unique opening screen was the stuff of that could make an 11-year old’s day). Meanwhile, the Nintendo Entertainment System (released in 1985) and the Super NES (released in 1991), skipped the startup screen all together—missing out on a chance to spark a tiny bit of joy.

But Sega? A flash of light and a custom-to-the-game 16-bit sound clip of the brand name.

Sega helped push Nintendo and video games to another level before flaming out in the 2000s. But 90’s kids will never forget: the Sega animation was the start of something fun.

3. The AOL login screen (1995)

In 2019, everything is online all the time. We even have always-on speakers in our pockets and on our kitchen counter ready to connect us to the internet with the whisper of a name.

But there was a time when “going online” was a conscious act. You sat down, cleared your schedule (and your phone line), and mentally prepared to be connected to strangers all over the world.

For many people, AOL was their first window to the web—and the idea that they were not alone. And the AOL login screen was the drum roll. Its final frame, a single figure transitioning to being part of a group, was the original optimistic promise of the web incarnate.

4. The Windows XP download screen (2001)

Before broadband and tabbed browsing, choosing to download a file required commitment. Even the simplest documents took several minutes while the rest of your internet browsing experience slowed to a crawl. We needed a visual to reassure us that yes, that file was on its way over—byte by excruciating byte.

The time estimate bar has always been infuriating nonsense, but watching those papers float languidly from left to right lulled you into a hypnotic state. You accepted your fate. Somewhere, slowly, data was trickling into your computer and you’d soon be able to view your colleague’s riveting TPS report. Or that sick song you heard on TRL.

5. The Mac beach ball (2001)

The early Macs featured a ticking wristwatch. Windows went with the hourglass. But there’s something disconcerting about your device reminding you how much of your life is uselessly slipping (or ticking) away while it works.

Enter the spinning beachball. Waiting is still not fun, and on a modern device it usually means something went really wrong. But at least OSX devices have some empathy for the wait by giving us something pretty to look at.

6. The iMessage “is typing” bubble (2007)

There are few UI elements more anxiety-inducing than Messenger’s three dots. This iconic iMessage animation meant more than “your friend is typing”— it’s a window into several long seconds of anxiety.

Did my joke land? Am I about to get rejected? Are they formulating a snarky comeback?

One could live lifetimes as those three dots moved—and die a thousand deaths if you saw the dots appear and disappear again. Though I’m sure the design brief for this just read “let the user know their contact is typing,” it ended up being a commentary on the human condition: we can never really know what people actually think about us. And those three dots reminded us with each conversation. Damn them.

7. The Uber “searching for ride” animation (2010)

Early rideshare adopters should all remember the first time they used Uber to transport themselves and a friend or parent that was a late adopter.

Wait, the car just showed up? And all you had to do was hit a button? And we don’t have to exchange money?

Uber is a revolution that is remaking the way we navigate our cities, but the company also pioneered many of the mobile app animations we take for granted.

Opening Uber and seeing a small fleet of potential personal chauffeurs feels like royalty—but it also feels like safety. It’s a subtle acknowledgment that this scary rideshare thing is actually one of the best things that have ever happened to us; that no matter where you are and how you got there, you can get home. Don’t believe us? All you have to do is check the app.

8. Twitter pull to refresh (2010)

When Steve Jobs unveiled the iPhone in 2007, many of the user interactions taken care of by a mouse or buttons were left totally ambiguous. How, exactly, am I supposed to even type on this thing?

And in the era of the never-ending content feed, the refresh was chief among the conventions in need of some serious reinvention. That’s when Loren Brichter released the Twitter app Tweetie, with one of the most revolutionary UI animations for mobile: the pull to refresh.

The pull to refresh is now part of nearly every app and an art form of its own. It’s an intrinsic part of our daily experience; even children instinctively know how to use touch screens in this way.

The pull to refresh was in us all along—it just took a Twitter app to surface it.