Cover Flow

In this Example, you’ll learn to use the Page tool to create a list of pages that transition using the Cover Flow effect.

Learn more about cover flow effects

The Cover Flow is an interaction pattern designed for visual browsing, such as through a list of icons, images, or album covers. It was originally developed by American artist Andrew Coulter Enright, who wrote about the concept in his 2004 essay “Dissatisfaction Sows Innovation”:

Like paper cards flipping within a bar jukebox, I pictured each cover flipping in and out of the illuminated center position, revealing the subsequent album/song as the user browsed through the current library (via the linear scroll-bar detailed below). The faster you scrolled, the faster the covers would shuffle in and out of the spotlight.

The idea was to help address a major shortcoming of the advent of digital music: That it eliminated the visceral satisfaction, feeling, and information sharing of cover art.

iTunes and Album Cover Flow Effect

Inspired by the image of covers flowing from one side to the next like albums in a jukebox, Enright would go on to collaborate with Jonathan del Strother to produce a demo application named CoverFlow in 2005. The technology was soon purchased by Apple, Inc. and quickly became a staple of Apple’s iTunes and Finder interfaces, especially on the iPhone (which featured Cover Flow ever since its first iteration in 2007)..

While Apple retired the pattern from their products in 2018, the “cover flow effect” is well-established for interactions where a user is paging through a list of items that either are images themselves, such as a photo gallery, or where the item may be meaningfully replaced by its image. Or, as Enright originally wrote, where an item’s image is “a true signifier as opposed to a decoration”, such as in the case of album artwork.

Even if CoverFlow iPhone features are a thing of the past, it’s a popular, aesthetically-pleasing component a lot of developers find appealing for their apps or websites. jQuery or CSS or Javascript cover flows can be found in all manner of other applications; even if Apple has retired it, the idea is here to stay.

Components of a cover flow effect

Whatever their format, Cover flow (JS or otherwise) sliders create a series of layers that fold and flow over each other. As the user scrolls (with their finger or a mouse or keys) back and forth, the layers move and shift, putting the item in focus at the very center.

Sometimes, other elements like opacity will play in, as layers on the side can fade out as the eye no longer needs to focus on them.

You can also tweak the animations to your liking, changing attributes like:

• Direction
• Duration
• Rotation
• Scale

And many others, depending on what software you use.

How to create a cover flow effect in Framer

The pattern works best when it presents the current item while also implying the presence of other items in the list, which remain partially angled away from the viewer. In most cases, presenting neighboring items in this way removes the need for page indicators.

As shown in the Example, you can achieve this effect in Framer by leaving space between the Page component’s edges and the edges of the device frame, then setting the component’s Overflow property to Show.