[framer-motion] 조건부 애니메이션

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

const ConditionalAnimationComponent = () => {
  const [isVisible, setIsVisible] = useState(false);


  return (
    <div>
      <motion.div
        initial={{ x: '-100vw' }}
        animate={isVisible ? { x: 0 } : { x: '-100vw' }}
        transition={{ type: 'spring', stiffness: 50 }}
        style={{
          margin: '20px',
          padding: '10px',
          backgroundColor: 'lightblue',
          borderRadius: '5px',
          textAlign: 'center',
          fontSize: '1.5rem',
        }}
      >
        {isVisible ? '애니메이션 실행' : '애니메이션 대기 중'}
      </motion.div>
    </div>
  );
};

export default ConditionalAnimationComponent;