react animation effect

import {motion} from "framer-motion" 

ex)

 <button onClick={onViewDetails}>

              View Details{' '}

              <motion.span className="challenge-item-details-icon" animate={{rotate : isExpanded ? 180 : 0}}>&#9650;</motion.span>

            </button>

 

import {AnimatePresence} from "framer-motion" 

요소가 사라지는 애니메이션을 적용할때 사용한다

ex)

<AnimatePresence> {isCreatingNewChallenge && <NewChallenge onDone={handleDone} />} </AnimatePresence>

 

animate

애니메이션 효과를 준다

ex)

 <motion.span className="challenge-item-details-icon" animate={{rotate : isExpanded ? 180 : 0}}>&#9650;

 

 

animation효과 설정 재사용(variants)

ex)

variants ={{

        hidden : {opacity: 0 , y: 30 },

        visible : {opacity : 1,y:0}

      }}

 

list사이에 시차를 둔다 

transition:{staggerChildren:0.1}