Framer Motion Wait to Calculate value before Starting animation - framer-motion

Question

I define x and y values to hide from as state:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
I have the following variant defined:
const transition = {
delay: 0,
duration: 0.5
};
const fromXYVariant = {
visible: {
y: 0,
x: 0,
transition
},
hidden: {
x,
y,
transition
}
};
and use it as
<AnimatePresence>
{!context.isGrouped(towerId2) ? (
<motion.div initial="hidden" animate="visible" exit="hidden" variants={fromXYVariant}>
<div>...</div>
</motion.div>
) : null}
</AnimatePresence>
I set my state variables using some complicated logic. However, I am running into an issue where, on the first "hidden animation" I use x and y as 0, because I haven't calculated them yet for my state.
My solution would be pausing the animation for a half a second or so while I do the math and then animate with the new values.
My question is, how do I pause framer motion from doing the animation while I do the math for the x and y not to be 0?

Answer 1

To pause framer motion from doing the animation you must use delay but instead of 0 as you are doing, you use 0.5 as you wished.
As you can see here:
With delay, you add a pause before the start of the animation (also in seconds). It will only delay the beginning of the initial animation; and not insert pauses between the repetitions.
And also seen in the framer motion documentation:
Delay the animation by this duration (in seconds). Defaults to 0.
const transition = {
delay: 0.2
}
There is also delayChildren:
When using variants, children animations will start after this duration (in seconds). You can add the transition property to both the Frame and the variant directly. Adding it to the variant generally offers more flexibility, as it allows you to customize the delay per visual state.
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
delayChildren: 0.5
}
}
}
const item = {
hidden: { opacity: 0 },
show: { opacity: 1 }
}
return (
<motion.ul
variants={container}
initial="hidden"
animate="show"
>
<motion.li variants={item} />
<motion.li variants={item} />
</motion.ul>
)