19. Scroll and Page
By enabling directionLock
on both the scroll and page components, 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.