Animation » Example Animations » 19. Scroll and Page combined

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

export function CC19ScrollAndPage() {
    return (
        <Page
            width={150}
            height={150}
            radius={30}
            center
            directionLock
        >
            <Frame size={150} radius={30} backgroundColor="#fff" />
            <Scroll
                width={150}
                height={150}
                radius={30}
                backgroundColor="#fff"
                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>
    )
}

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.)


Leave a Reply