test.js

/** @jsx jsx */
import React, { useState } from 'react'
import { motion } from "framer-motion"
import './HelloWorld.less'
import { css, jsx, ClassNames } from '@emotion/core'
import styled from '@emotion/styled'

const Box = styled(motion.div) `
  border: 4px solid pink;
  width: 200px; height: 200px;
`

const spring = {
  type: "spring",
  damping: 10,
  stiffness: 400,
  // delay: 1,
}

const variants = {
  open: { opacity: 1, x: "0px", y: "0px" },
  closed: { opacity: 1, x: "20px", y: "20px" },
}


export default ({ isVisible }) => {
  // const [isHovered, setHovered] = useState(false)
  const [isOpen, setIsOpen] = useState(true)
  return (
    <>
      <h1
        onClick={() => setIsOpen(!isOpen)}
      >Hello World!</h1>

      <Box
        animate={isOpen ? "open" : "closed"}
        transition={spring}
        // transition={{ duration: 2, delay: 1 }}
        variants={variants}
      ></Box>

      <motion.div
        animate={isOpen ? "open" : "closed"}
        transition={spring}
        variants={variants}
      >
        <h6>Sub text...</h6>
      </motion.div>

      {/* <motion.div
        className="box"
        // animate={{ x: 100,  boxShadow: "10px 10px 0 rgba(0, 0, 0, 0.2)", }}
        // whileHover={{ scale: 1.1 }}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        animate={{
          // scale: isHovered ? 1.2 : 1,
          x: isHovered ? 100 : 0
        }}
        transition={{ ease: "easeOut", duration: 2 }}
      >
        <h6 animate={{ opacity: isVisible ? 1 : .5 }}>Sub text...</h6>
      </motion.div> */}
    </>
  )
};