29. Stack
No animation, just an example of how to create a <Stack>
in code.
Code component
export function CC29Stack() {
return (
<Stack
// Visual & layout
size={150}
radius={30}
center
// Stack
direction="horizontal"
overflow="hidden"
distribution="space-between"
>
<Frame width={70} height={150} radius={10} backgroundColor="#fff" />
<Frame width={70} height={150} radius={10} backgroundColor="#fff" />
</Stack>
)
}
Framer Motion
The Framer Motion library doesn’t have a stack, so I used a regular Flexbox.
export function FM29Flexbox() {
return (
<Center>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
overflow: "hidden",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<div
style={{
width: 70,
height: 150,
borderRadius: 10,
backgroundColor: "#fff",
}}
/>
<div
style={{
width: 70,
height: 150,
borderRadius: 10,
backgroundColor: "#fff",
}}
/>
</div>
</Center>
)
}
(No animation, so just regular divs instead of motion divs.)
Override
No override needed.