Animation(animate prop)

Most animations will be performed with the animate prop.

<motion.div animate={{ x: 100 }} />

When any value in animate changes, the component will automatically animate to the updated target.

Enter animations(initial prop)

• 만약 initial 속성값과 animate의 속성값이 다르다면 animate 속성값에 따라 motion component는 자동으로 생성 될 것이다.
• 만약 아래 코드와 같이 initail value값이 false일 경우 animate의 값이 무시된다.

	<motion.div animate={{ x: 100 }} initial={false} />

Exit animations(exit prop)

AnimatePresence component
AnimatePresence을 사용하지 않을 경우 component가 제거 될 때 갑작스러운 화면 전환이 이루어 질 수 있다.
AnimatePresence component을 사용하여 갑작스러운 화면 전환을 방지할 수 있다.

• AnimatePresence component는 exit animation을 필요로 한다.
  

Props

initial: boolean

By passing initial={false}, AnimatePresence will disable any initial animations on children that are present when the component is first rendered.

custom: any

When a component is removed, there's no longer a chance to update its props. So if a component's exit prop is defined as a dynamic variant and you want to pass a new custom prop, you can do so via AnimatePresence. This will ensure all leaving components animate using the latest data.

onExitComplete(): void
Fires when all exiting nodes have completed animating out.

SlideShow Example

출처

https://www.framer.com/docs/animation/
https://www.framer.com/docs/animate-presence/