Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Cover Flow

Open in Framer to interactPreview this example

Use the Page tool to create a cover flow effect.

Open in FramerPreview Example

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 Andrew Coulter Enright, who wrote about the concept in 2004.

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.

Enright would go on to collaborate with Jonathan del Strother to produced 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.

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 item’s image is “a true signifier as opposed to a decoration”, such as in the case of album artwork.

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 achieved 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.

Resources
  • Page tool Support
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement