<div id="app">
  
</div>              

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
/*   background: linear-gradient(180deg, #f08, #d0e); */
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion} from "https://esm.sh/framer-motion@8.3.3";


const list = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
  
}

const item = {
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
}



const App = function() {
  
  return (
  <motion.ul
    initial="hidden"
    animate="visible"
    variants={list}
    transition={
    {staggerChildren:0.5}
  }
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)