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

Bottom Sheet

Open in Framer to interactPreview this example

Slide in some extra content with the link tool's Overlay transition.

Open in FramerPreview Example

Learn more about bottom sheet interactions

Bottom sheets are a common interaction found only on mobile sites and apps. Bottom sheets are only used on mobile devices as they are an ergonomic solution to secondary content and can be easily opened and closed by the thumb on one hand. They provide secondary information to the main screen, while the main screen and primary information remain visible behind a backdrop with opacity.

Bottom sheets can vary in height. Most bottom sheets will likely take up half of the screen size while others may not need to be quite so tall depending on the content that must be shown at the bottom of the screen. There are several different use cases for bottom sheets. In their collapsed state, maybe look the same, but they can hold very different content. For example, some common use cases are menus, location information, music player settings, or a search bar.

How to make this interaction in Framer

The bottom sheet in Framer is quite easy to create. You will need two frames, one for your main screen and one for your bottom sheet. The bottom sheet should be a smaller height than your main screen. Once you have designed the content for your main screen and bottom sheet, link the main screen to the bottom sheet and set the transition type to overlay. Then, customize your overlay so that it comes up from the bottom on tap. And there you have your interaction!

Resources
  • Interactions Support
  • Transitions 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