React

by alexb

HTML

<script src="https://unpkg.com/[email protected]/dist/framer-motion.dev.js"></script>
<div id="app"></div>

CSS

body {
  font: 1rem sans-serif
}

.foo {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

ul {
  background: rgba(255, 0, 0, 0.3);
  margin: 0.5em;
  padding: 0.5em;
}

li {
  background: rgba(0, 0, 255, 0.3);
  display: block;
  margin: 0.5em;
  padding: 1em;
}

React

const { motion } = Motion;
const { useEffect, useState } = React;

/* const Foo = ({ isVisible }) => {
  return (
    <motion.div
      className="foo"
      initial={false}
      animate={{ opacity: isVisible ? 1 : 0 }}
    />
  );
}; */

const List = () => {
  const list = {
    visible: { opacity: 1 },
    hidden: { opacity: 0 },
  }

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

  return (
    <motion.ul
      initial="hidden"
      animate="visible"
      variants={list}
    >
      <motion.li variants={item} />
      <motion.li variants={item} />
      <motion.li variants={item} />
    </motion.ul>
  )
}

const App = () => {
  const [show, setShow] = useState(false);
  
  useEffect(() => {
  	setTimeout(() => setShow(true), 500);
  }, []);
  
	return (
  	<div>
      <List />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))