framer-motion | custom, mode="wait"

custom
각 애니메이션 컴포넌트에 대해 동적 variants를 다르게 적용할 때 사용할 수 있는 사용자 지정 데이터입니다.
```
const variants = {
visible: (custom) => ({
opacity: 1,
transition: { delay: custom * 0.2 }
})
}

< motion.div custom={0} animate="visible" variants={variants} />
< motion.div custom={1} animate="visible" variants={variants} />
< motion.div custom={2} animate="visible" variants={variants} />
```
https://www.framer.com/docs/component/###custom

exitBeforeEnter
true로 설정하면 AnimatePresence는 한 번에 하나의 컴포넌트만 랜더링합니다. exiting중인 컴포넌트는 entering하는 컴포넌트가 렌더링되기 전에 exit 애니메이션을 완료합니다.
```
< AnimatePresence exitBeforeEnter>
< motion.div key={currentItem} exit={{ opacity: 0 }} />
< /AnimatePresence>
```
https://www.framer.com/docs/animate-presence/###exitbeforeenter

 

exitBeforeEnter은 더이상 지원하지 않습니다. mode="wait"를 작성해주면되겠습니다.