Skip to content
Component inspired on the bottom sheet view pattern of Maps (iOS) by Apple.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Framer Bottom Sheet

license PRs Welcome Maintenance

Framer Bottom Sheet is a component inspired on the bottom sheet view pattern of Maps (iOS) by Apple. View demo

Install with Framer Modules

Install with Framer Modules

Manual Install

  1. Copy the file in the modules directory inside your project.

  2. Import it using this line one the top of your code view
    BottomSheet = require 'BottomSheet'

  3. Create your first bottom sheet using bottomSheet = new BottomSheet

Customization styles and animations

Property Default Value Description
alphaColor '#000000' Color of alpha that appear when moving to the highest state.
alphaOpacity 0.6 Opacity value for the alpha background
animationCurve Spring(damping: 0.75) Curve to when sheet move between states
backgrounColor '#F0F0F0' Background color of the sheet
deltaTolerance 1.25 Minium number of delta movement to move sheet to the highest/lowest state
dragable true Define if sheet is dragable
fallbackState State to be used when a previous state is not available and user tap on the dim background.
hideable true Define is sheet can be dismissed
image Background image of the sheet
indicator true Show the indicator on the top of the sheet
initState State in which the sheet will be initialized
name 'verticalPanel' Name that will have the layers created, this helps to identify the sheet in your list of layers.
speedRatio 0.35 Higher the number, faster the animations
states 30 Read about define custom states
tolerance 30 Minimum number of points of tolerance on DragEnd to come back to the current state.

You can always use bottomSheet.content.animate('stateName', options) if you want have more control.

Default states

Each bottom sheet has 3 default states.

Defaut state name Property Default value Description
bottom bottom 15 Show sheet at 15% of the screen height
middle middle 45 Show sheet at 45% of the screen height
top top 90 Show sheet at 90% of the screen height

Define custom states

You can define your custom states by passing an array. The height value is the % of the Screen.height. For example 50 means the half of the screen.

bottomSheet = new BottomSheet
  states: [
    { name: 'small', height: 15 }
    { name: 'midium', height: 40 }
    { name: 'big', height: 75 }
    { name: 'full', height: 100 }


Function Description
bottomSheet.wrapper Returns the wrapper layer. This layer contains everything, including the alpha background
bottomSheet.content Returns the sheet layer. This helps change layers properties, add new states, etc.
bottomSheet.indicator Return the indicator layer.
bottomSheet.state Returns current sheet state. For example 'top', 'middle'
bottomSheet.animateTo(state, time) Gets the difference on position Y between current state and next one, then animate based on the speedRatio property, time argument overwrite the speedRatio and max/min values.


# Create a sheet, initialize it with the 'bottom' state, and a red background
bottomSheet = new BottomSheet
  name: 'builder'
  initState: 'bottom'
  backgroundColor: 'red'

# Change sheet properties after it has been created
bottomSheet.content.backgrondColor = 'cyan'
bottomSheet.content.blur = 3

# Print the current sheet state name
print bottomSheet.state

# Set a custom name and overwrite the default state heights, and add an image as background
panelVehicle = new BottomSheet
  name: 'myVehiclesPanel'
  image: 'images/vehicles.png'

# Animate to other state
bottomSheet.animateTo('top', 0.75)

# Animate to other state with default .animate function
  options: time: 1, curve: Spring(damping: 0.1)

# Add a new state to the sheet and animate
sheet.content.states.bgPurple =
  backgroundColor: 'purple'
  options: time: 0.5

You can’t perform that action at this time.