17. Scroll

Just a demo of how to use the scroll component in code.

Code component

const items = [0, 1, 2, 3, 4]
const height = 70
const padding = 10

export function CC17Scroll() {
    return (
        <Scroll width={150} height={150} radius={30} center>
            {items.map(index => {
                return (
                    <Frame
                        // Visual & layout
                        height={height}
                        width={150}
                        radius={20}
                        backgroundColor="#fff"
                        top={(height + padding) * index}
                        // Required by React
                        key={index}
                    />
                )
            })}
        </Scroll>
    )
}

Framer Motion

There’s no scroll component in Framer Motion, but a motion.div can be made draggable. With the correct dragConstraints, it will behave exactly like a <scroll>.

const items = [0, 1, 2, 3, 4]
const height = 70
const padding = 10
const size = 150

export function FM17Scroll() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    overflow: "hidden",
                    position: "relative",
                    transform: "translateZ(0)",
                    cursor: "grab",
                }}
                whileTap={{ cursor: "grabbing" }}
            >
                <motion.div
                    style={{
                        width: 150,
                        height: getHeight(items),
                    }}
                    drag="y"
                    dragConstraints={{
                        top: -getHeight(items) + size,
                        bottom: 0,
                    }}
                >
                    {items.map(index => {
                        return (
                            <motion.div
                                style={{
                                    width: 150,
                                    height: height,
                                    borderRadius: 20,
                                    backgroundColor: "#fff",
                                    position: "absolute",
                                    top: (height + padding) * index,
                                }}
                                key={index}
                            />
                        )
                    })}
                </motion.div>
            </motion.div>
        </Center>
    )
}

function getHeight(items) {
    const totalHeight = items.length * height
    const totalPadding = (items.length - 1) * padding
    const totalScroll = totalHeight + totalPadding
    return totalScroll
}

Override

There’s no override version of this example because you only need the scroll tool to create it on the canvas.