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

Wheel Picker

Open in Framer to interactPreview this example

Spin up a great-looking date picker wheel with two Page components.

Open in FramerPreview Example

In this Example, you’ll learn how to create a wheel picker for date, time, and other uses by means of the Page tool.

What is a wheel picker?

A wheel picker — also known as a selector wheel, a spinner wheel, or a spinning list — is a convenient method for choosing between a long range of different options without the need to display all those options at the same time. You’ll most commonly encounter a spinning list in the form of a wheel date picker of the kind used to set a date in an app.
Like many other mobile patterns, the wheel picker is a product of necessity, in that it came about as a direct result of the limited screen space available on smaller devices.

When to use wheel pickers?

If a design includes a form, then users will likely need to select an option from among a list of many other similar items. An obvious example being when choosing between the months of the year and the days of a month in order to fill in a date field.

On desktop, a designer might present that choice through a dropdown menu displaying all the months and days at the same time in a long list. On mobile, however, dropdown menus are often not the best style of solution, due to the limited screen space and small tap targets. For this reason a designer may instead choose to employ a date picker wheel, permitting convenient selection from all the available options.

In Apple’s mobile Safari browser, wheel pickers are the default way of interacting with both a select element and a date-typeinput element.(On desktop, a select input produces a dropdown menu and a date-type input opens a date picker). Android and other browsers use other solutions. In part this may be because date wheel pickers are notoriously difficult to design.

What are the advantages of a rotating wheel selector?

While a dropdown menu will usually show every item in the list simultaneously, a wheel picker instead satisfies a“next-best” set of requirements:


● It indicates the currently selected item.

● It allows the user to move forward and backward between available choices.

● It indicates whether or not more choices exist in a given direction.

Finally, a rotating selector wheel does all of this through a single, low-precision interaction: the vertical scroll. This makes the wheel picker ideal not only as a date/time picker tool, but in any situation where the number of options in a multiple choice list exceed the screen space available to display all those options at once.

Make a wheel picker in Framer

The trick to successfully designing a wheel picker in Framer is to use a Page component with a vertical direction and the Wheel Effect selected as its Effect. Resize the component to the size of its pages, and then set its Overlay to Show.

Increasing the Page component’s Gap property will increase the spacing between items. Setting the Momentum property to true will allow for longer moves between items, but may make short moves more difficult when using pages with smaller heights.

By using Framer you can quickly put together a convenient wheel picker for your app without the need to get into HTML or other code.

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