19. Scroll and Page

By enabling directionLock on both the Scroll and Page Component, only one of them will move at a time.

Code Component

export function CC19ScrollAndPage() {
    return (
        <Page
            // Visual & layout
            width={150}
            height={150}
            radius={30}
            center
            // Paging
            directionLock
        >
            <Frame size={150} radius={30} backgroundColor="#fff" />
            <Scroll
                // Visual & layout
                width={150}
                height={150}
                radius={30}
                backgroundColor="#fff"
                // Scrolling
                directionLock
            >
                <Frame
                    width={150}
                    height={70}
                    radius={20}
                    backgroundColor="#fff"
                />
                <Frame
                    width={150}
                    height={70}
                    radius={20}
                    backgroundColor="#fff"
                    top={80}
                />
                <Frame
                    width={150}
                    height={70}
                    radius={20}
                    backgroundColor="#fff"
                    top={160}
                />
                <Frame
                    width={150}
                    height={70}
                    radius={20}
                    backgroundColor="#fff"
                    top={240}
                />
                <Frame
                    width={150}
                    height={70}
                    radius={20}
                    backgroundColor="#fff"
                    top={320}
                />
            </Scroll>
            <Frame size={150} radius={30} backgroundColor="#fff" />
        </Page>
    )
}

Framer Motion

Not possible, because Framer Motion doesn’t have a Page component.

Override

There’s no Override version of this example because you only need the Page and Scroll tools to recreate it.