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.