We can also set the initial values of animatable CSS properties using initial prop.

PS it's working for the 2nd example where there are. I am animating the background image property on the headings The headings are animated at the same time without any delay in between them. I am using variants on parent and the headings are the children. This is so common, that framer motion has a specific property for that: staggerChildren. For example, default opacity for CSS elements is 1 (even if we dont set it explicitly), so framer-motion knows how to animate it down to 0.5. I am trying to animate gradients on text, but stagger childern is not working as expected. motion library from framer-motion and use motion.div instead. It is ok for the parent component because it will toggle between animate and close when you switch the animate property, but the children are missing a proper initial property to animate from. Framer-motion will infer the initial state based on the specified CSS properties, or their defaults. When clicking the Add button, the ParentBox has one additional unique Box. Not having an initial property on the parent motion component was the root cause of the problem. sorry I misread the framer motion change log : youre correct popmotion is already listed as a dependency, but framer-motion only imports a list of key-value pairs and utility functions,everything else is tree-shaked out. 1 I have a list ( ParentBox.tsx) that contains many items ( Box.tsx ). Import Īs I mentioned on my previous comment, the context provider in the middle was missing the initial property, and that clicked on my mind. Since AnimatePresence does not control the existence of its children, it is difficult to see how this should be implemented.

Framer motion staggerchildren