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.