19. Scroll and Page combined
By enabling directionLock
on both the scroll and page components, only one of them will move at a time.
Code component
const items = [0, 1, 2, 3, 4]
export default function CC_19_Scroll_and_Page_combined(props) {
return (
<div>
<Page
width={150}
height={150}
radius={30}
directionLock
>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
/>
<Scroll
width={150}
height={150}
radius={30}
directionLock
>
{items.map((index) => {
return (
<div
style={{
width: 150,
height: 70,
borderRadius: 20,
backgroundColor: "#fff",
marginBottom:
index !== items.length - 1 ? 10 : 0,
}}
/>
)
})}
</Scroll>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
/>
</Page>
</div>
)
}
Pro tip: When using the <Page>
component in a React project (like in the CodeSandbox above), set the box-sizing
of all elements to border-box
. Like this, for instance:
* {
box-sizing: border-box;
}
<Page>
box-sizing
, CSS universal selector (*
)
Code override
You only need the page and scroll tools to recreate this on the canvas. No code needed! (directionLock
is called ‘Lock’ in the properties panel.)
2 comments on “19. Scroll and Page combined”
Leave a Reply
You must be logged in to post a comment.
Hi, a very specific question. Is there a way to use any elements of the pages (p1, p2, etc.) as triggers to go to a different page? Thanks!
Changing the Page component’s
currentPage
should make it move to another page.You’ll have to save the value in a data store, because you’ll need different overrides (for the Page component + the elements on the pages that trigger the transitions).