27. Variants: Staggered
A first example of how child frames will follow the animation of the parent frame (or motion.div).
The delay between the parent and child animations is orchestrated with staggerChildren
and delayChildren
.
Code component
export function CC27VariantsStagger() {
const container = {
hidden: { rotate: 90 },
show: {
rotate: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.3,
},
},
}
const itemA = {
hidden: { scale: 0, top: 100 },
show: { scale: 1, top: 30 },
}
const itemB = {
hidden: { scale: 0, top: 200 },
show: { scale: 1, top: 80 },
}
const background = "#80F"
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Animation
variants={container}
initial="hidden"
animate="show"
>
<Frame
// Visual & layout
size={40}
radius={100}
backgroundColor={background}
left={30}
// Animation
variants={itemA}
/>
<Frame
// Visual & layout
size={40}
radius={100}
backgroundColor={background}
left={80}
// Animation
variants={itemA}
/>
<Frame
// Visual & layout
size={40}
radius={100}
backgroundColor={background}
left={30}
// Animation
variants={itemB}
/>
<Frame
// Visual & layout
size={40}
radius={100}
backgroundColor={background}
left={80}
// Animation
variants={itemB}
/>
</Frame>
)
}
Framer Motion
export function FM27VariantsStagger() {
const container = {
hidden: { rotate: 90 },
show: {
rotate: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.3,
},
},
}
const itemA = {
hidden: { scale: 0, top: 100 },
show: { scale: 1, top: 30 },
}
const itemB = {
hidden: { scale: 0, top: 200 },
show: { scale: 1, top: 80 },
}
const background = "#80F"
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
position: "relative",
}}
variants={container}
initial="hidden"
animate="show"
>
<motion.div
style={{
width: 40,
height: 40,
borderRadius: 75,
backgroundColor: background,
position: "absolute",
left: 30,
}}
variants={itemA}
/>
<motion.div
style={{
width: 40,
height: 40,
borderRadius: 75,
backgroundColor: background,
position: "absolute",
left: 80,
}}
variants={itemA}
/>
<motion.div
style={{
width: 40,
height: 40,
borderRadius: 75,
backgroundColor: background,
position: "absolute",
left: 30,
}}
variants={itemB}
/>
<motion.div
style={{
width: 40,
height: 40,
borderRadius: 75,
backgroundColor: background,
position: "absolute",
left: 80,
}}
variants={itemB}
/>
</motion.div>
</Center>
)
}
Overrides
export function Parent(): Override {
const container = {
hidden: { rotate: 90 },
show: {
rotate: 0,
transition: {
staggerChildren: 0.1,
delayChildren: 0.3,
},
},
}
return {
variants: container,
initial: "hidden",
animate: "show",
}
}
export function ChildA(): Override {
return {
variants: {
hidden: { scale: 0, top: 100 },
show: { scale: 1, top: 30 },
},
}
}
export function ChildB(): Override {
return {
variants: {
hidden: { scale: 0, top: 200 },
show: { scale: 1, top: 80 },
},
}
}