I tried to use a React.Fragment using motion to animate different element but I would like to use a React Fragment so when the animation happens I don't adding extra nodes to the DOM.
"use client";
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
const ItemTransition = ({
children,
delay,
}: {
children: React.ReactNode;
delay: number;
}) => {
return (
<motion.div ( Can I replace it for a React.Fragment??? )
className="flex"
initial={{ opacity: 0, x: 40 }}
animate={{
opacity: 1,
x: 0,
transition: { delay: delay, duration: 1.5 },
}}
exit={{ opacity: 0, x: 40 }}
transition={{ duration: 3 }}
>
{children}
</motion.div>
);
};
export default ItemTransition;
I tried changing the <div> element for a React.Fragment but is not working, maybe there's a different approach to make it possible.
Framer motion can't animate without a node to animate. It uses it's <motion />
components to animate, and <motion />
components are DOM primitives. Here are the supported elements: