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 { FrameScroll } 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 { FramePage } 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>