How to use Framer Motions's when to control transition animation start - framerjs

Question

I am trying to set display:none on a parent element once the children stagger animations have completed. My li elements fade out and the parent ul should then update to display:none
I can set a delay in the transition, but trying to tap into the when property. I have tried:
const variants = {
open: {
display: 'block',
transition: {
staggerChildren: 0.17,
delayChildren: 0.2,
}
},
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
display: {
when: "afterChildren" // delay: 1 - this will work
}
}
}
};
Clearly I am getting the syntax incorrect or cannot be used as I intend.
Sandbox Demo
import * as React from "react";
import { render } from "react-dom";
import {motion, useCycle} from 'framer-motion';
const ulVariants = {
open: {
display: 'block',
visibility: 'visible',
transition: {
staggerChildren: 0.17,
delayChildren: 0.2,
}
},
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
display: {
when: "afterChildren" // delay: 1 - will work
}
}
}
};
const liVariants = {
open: {
y: 0,
opacity: 1,
transition: {
y: {stiffness: 1000, velocity: -100}
}
},
closed: {
y: 50,
opacity: 0,
transition: {
y: {stiffness: 1000}
}
}
}
const Item = (props) => (
<motion.li
variants={liVariants}
>
{props.name}
</motion.li>
)
const App = () => {
const [isOpen, toggleOpen] = useCycle(false, true);
return (
<>
<button onClick={toggleOpen}>Toggle Animation</button>
<motion.ul
variants={ulVariants}
animate={isOpen ? 'open': 'closed'}
>
{Array.from(['vader', 'maul', 'ren']).map((item, index) => (
<Item key={item} {...{name: item}} />
))}
</motion.ul>
</>
);
};
render(<App />, document.getElementById("root"));

Answer 1

when should be a property of the transition object, not display.
This seems to work (unless I'm misunderstanding what you're trying to do):
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
when: "afterChildren"
}
}
Code Sandbox

Answer 2

You can use
<motion.div
animate={{
transitionEnd: {
display: "none",
},
}}
/>
When animating to a non-animatable value like "block", this value will be set instantly. By setting this value within transitionEnd, this value will be set at the end of the animation.
source: https://www.framer.com/docs/component