Is there a way to use a React.Fragment with motion ( from Framer Motion)?

Question

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.

Answer 1

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:

• HTML Elements
• SVG Elements