card.jsx

import { motion } from 'framer-motion'
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

export default function Cards(props) {
  const [bar, setBar] = useState(false)
  const { custom, src } = props

  const Box = styled(motion.div)`
    margin-top: 40px;
    padding: 40px 0px 0px 0px;

    width: 300px;
    height: 300px;
  `
  const Boxes = styled(motion.div)`
    background-image: url(${src});
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  `

  const handleBar = () => {
    const offset = window.scrollY
    if (offset > 2099) {
      setBar(true)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleBar)
  })

  const easing = [0.6, -0.05, 0.01, 0.99]

  const boxes = {
    init: { y: 60, opacity: 0 },
    animate: (custom) => ({
      y: 0,
      opacity: 1,
      transition: {
        duration: 1,
        delay: custom * 0.2,
        ease: easing,
      },
    }),
  }
  const box = {
    init: { opacity: 0 },
    animate: { opacity: 1, transition: { duration: 1 } },
    whileHover: {
      visibility: 'hidden',
      transition: { ease: 'easeInOut', yoyo: Infinity },
    },
  }
  return (
    <Box
      variants={boxes}
      custom={custom}
      animate={bar ? 'animate' : 'init'}
      initial="init"
    >
      <Boxes className="card" variants={box} animate="animate" initial="init">
        <div className="overlay">
          <h1 className="title">hello world</h1>
          <button className="button">click</button>
        </div>
      </Boxes>
    </Box>
  )
}