Library

The API reference covering components, events and properties included within the Framer Library.

Scroll

The Scroll component in Framer allows you create scrollable areas. It can be imported from the Framer Library and used in code components. Add children that exceed the height or width of the component to create horizontally or vertically scrollable areas.

  import * as React from "react";
  import { Frame, Scroll } from "framer";
  ​
  export class List extends React.Component {
    render() {
      return (
        <Scroll>
          <Frame />
        </Scroll>
      )
    }
  }

Scroll Properties

The Scroll properties are also available within other components, like Page.

onScrollStart: ScrollEventHandler

On start of scroll.

  <Scroll onScrollStart={this.scrollHandler}>
    <Frame />
    <Frame />
  </Scroll>
onScrollEnd: ScrollEventHandler

On end of scroll.

  <Scroll onScrollEnd={this.scrollHandler}>
    <Frame />
    <Frame />
  </Scroll>
direction: "horizontal" | "vertical" | "both"

Scrolling direction.

  <Scroll direction={"both"}>
    <Frame />
    <Frame />
  </Scroll>
directionLock: boolean

Lock the current scrolling direction.

  <Scroll directionLock={true}>
    <Frame />
    <Frame />
  </Scroll>
mouseWheel: boolean

Enable scrolling via the mousewheel. Set to true by default.

  <Scroll mouseWheel={true}>
    <Frame />
    <Frame />
  </Scroll>
contentOffsetX: number | Animatable | null

Horizontal offset of the scrollable content.

  <Scroll contentOffsetX={10}>
    <Frame />
    <Frame />
  </Scroll>
contentOffsetY: number | Animatable | null

Vertical offset of the scrollable content.

  <Scroll contentOffsetY={10}>
    <Frame />
    <Frame />
  </Scroll>

Page

The Page component allows you to create horizontally or vertically swipeable areas. It can be imported from the Framer Library and used in code components. Add children to create pages to swipe between. These children will be stretched to the size of the page component by default, but can also be set to auto to maintain their original size.

  import * as React from "react";
  import { Frame, Page } from "framer";
  ​
  export class Page extends React.Component {
    render() {
      return (
        <Page>
          <Frame />
        </Page>
      )
    }
  }

Page Properties

The Page component also extends all Scroll properties.

onChangePage: PageEventHandler

On change of a page.

  <Page onChangePage={this.pageHandler}>
    <Frame />
    <Frame />
  </Page>
direction: PageDirection

Current swipe direction. Either "horizontal" or "vertical".

  <Page direction={"vertical"}>
    <Frame />
    <Frame />
  </Page>
contentWidth: PageContentDimension | number

Width of the pages within the component. Either "auto" or "stretch" or a numeric value.

  <Page contentWidth={"stretch"}>
    <Frame />
    <Frame />
  </Page>
contentHeight: PageContentDimension | number

Height of the pages within the component. Either "auto" or "stretch" or a numeric value.

  <Page contentHeight={"stretch"}>
    <Frame />
    <Frame />
  </Page>
alignment: PageAlignment

Alignment of the pages within the component.

  <Page alignment={"center"}>
    <Frame />
    <Frame />
  </Page>
currentPage: number

Index of the current page.

  <Page currentPage={1}>
    <Frame />
    <Frame />
  </Page>
gap: number

Gap between the page.

  <Page gap={10}>
    <Frame />
    <Frame />
  </Page>
padding: number

Padding within the page component.

  <Page padding={10}>
    <Frame />
    <Frame />
  </Page>
paddingPerSide: boolean

Set padding on all sides, or one specific one.

  <Page paddingPerSide={true}>
    <Frame />
    <Frame />
  </Page>
paddingTop: number

Top padding within the page component.

  <Page paddingTop={10}>
    <Frame />
    <Frame />
  </Page>
paddingRight: number

Right padding within the page component.

  <Page paddingRight={10}>
    <Frame />
    <Frame />
  </Page>
paddingBottom: number

Bottom padding within the page component.

  <Page paddingBottom={10}>
    <Frame />
    <Frame />
  </Page>
paddingLeft: number

Left padding within the page component.

  <Page paddingLeft={10}>
    <Frame />
    <Frame />
  </Page>
momentum: boolean

Enable or disabling momentum, which defines if the page should auto-snap to the next page or not.

  <Page momentum={false}>
    <Frame />
    <Frame />
  </Page>
defaultEffect: PageEffect

Pick a custom effect.

  <Page defaultEffect={PageEffect.Pile}>
    <Frame />
    <Frame />
  </Page>

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.