Edit Page

#Page

The Page Component allows you to create horizontally or vertically swipeable areas

The Page Component is based on a Frame, which means that it supports all Frame properties. Add Frames to a Page to create pages to swipe between. They will be stretched to the size of the page component by default, but can also be set to auto, to maintain their original size.

  • Create horizontal or vertical pages
  • Create scrollable lists that snap to content
  • Use custom transitions like 3D and Pile
import * as React from "react"
import { Frame, Page } from "framer"

export function MyComponent() {
  return (
    <Page>
      <Frame>A</Frame>
      <Frame>B</Frame>
      <Frame>C</Frame>
    </Page>
  )
}

#Content

#alignment: PageAlignment

Alignment of the pages within the component. Either "start", "center", or "end". Set to "start" by default.

<Page alignment="center" />

#animateCurrentPageUpdate: booleanBeta

Determines whether the component should animate page changes. Set to true by default.

<Page animateCurrentPageUpdate={false} />

#contentWidth: PageContentDimension | number

Width of the pages within the component. Either "auto" or "stretch" or a numeric value. Set to "stretch" by default.

<Page contentWidth="auto" />

#currentPage: number

Index of the current page. Set to 0 by default.

<Page currentPage={5} />

#defaultEffect: PageEffect

Pick one of the predefined effects. Either "none", "cube", "coverflow", "wheel" or "pile". Set to "none" by default.

<Page defaultEffect={"coverflow"} />

#gap: number

A number describing the gap between the page elements. Set to 10 by default. Can not be negative.

<Page gap={0} />

#momentum: boolean

When enabled you can flick through multiple pages at once.

<Page momentum />

#Padding

#padding: number

Padding to be applied to all sides. Set to 0 by default. To specify different padding for each side, provide individual paddingTop, paddingLeft, paddingRight and paddingBottom values.

<Page padding={20} />

#paddingTop: number

Value for the top padding of the container. Set to 0 by default.

<Page paddingTop={20}  />

#paddingRight: number

<Page paddingRight={20}  />

Value for the right padding of the container. Set to 0 by default.

#paddingBottom: number

<Page paddingBottom={20}  />

Value for the bottom padding of the container. Set to 0 by default.

#paddingLeft: number

<Page paddingLeft={20}  />

Value for the left padding of the container. Set to 0 by default.

#Events

#onChangePage(currentIndex, previousIndex): void

A callback that will be invoked when changing the page.

<Page
    onChangePage={(current, previous) => {
        console.log(current, previous)
    }}
/>
currentIndex: number

The current page number

previousIndex: number

The index of the previous page

#Effects

The Page component comes with a set of pagination effects that change how pages look as animate as you scroll through them. You can also create custom effects of your own.

#None

No custom effect is applied. This is the default.

<Page defaultEffect={"none"} />

#Cube

Each page is positioned as a 3D cube, connected to the current page.

<Page defaultEffect={"cube"} />

#Cover Flow

Each page is positioned in 3D, behind the current page.

<Page defaultEffect={"coverflow"} />

#Wheel

Each page is gently titled in 3D, like a wheel.

<Page defaultEffect={"wheel"} />

#Pile

Each page is stacked behind the current page.

<Page defaultEffect={"pile"} />

#Custom

#effect: (info: PageEffectInfo) => PageEffectValues

Allows you to provide a custom transition effect for individual pages.

This function is called once for every page, every time the scroll offset changes. It returns a new set of styles for this page.

function scaleEffect() {
    const { normalizedOffset } = info
    return {
        scale: Math.max(0, 1 + Math.min(0, normalizedOffset * -1))
    }
}

return <Page effect={scaleEffect} />

#PageEffectInfo

Information about the current effect.

#direction: PageDirection

The direction of page scrolling, "horizontal" or "vertical"

#gap: number

The gap between each page, in pixels.

#index: number

The index of the current page. The first page is 0, the second is 1 and so on.

#normalizedOffset: number

The offset of this page, normalised to the page size.

For instance, if each page is 200 pixels wide, and we're on page index 1, the normalizedOffset of page index 0 will be -1.

#offset: number

The offset of this page, in pixels, measured from the left-most part of the container.

#pageCount: number

The total number of pages.

#size: Size

The width and height of the page.