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

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}
                center
                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>
    )
}

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