Transitions

• By default, framer animation transitions are implicit based on the type of value being animated.
  • Physical property changes like position and scale use Spring Animations|Spring Animation.
  • Values like opacity and color changes use Tweening with easings.
• This can be customized by providing a transition.

// https://codesandbox.io/p/sandbox/dazzling-clarke-p5wwjv

// Spring animation
<motion.div
	animate={{
		x: 100,
		transition: { type: "spring", duration: 0.5, bounce: 0.2 },
	}}
	/>
	
// Easing animation
<motion.div
	animate={{
		x: 100,
		transition: { duration: 0.3, ease: "easeOut" },
	}}
/>

Transitioning Between Elements

• By default, elements animate in/out as soon as they're added. (This is sync mode.)
• Use the wait mode to animate between two elements. The entering child will wait until the exiting child has animated out. This only works with a single child at a time.

// https://codesandbox.io/p/sandbox/exit-animations-forked-gjypvt

const variants = {
  hidden: { opacity: 0, scale: 0.5 },
  visible: { opacity: 1, scale: 1 },
};
 
<button aria-label="Copy code snippet" onClick={copy}>
  <AnimatePresence mode="wait" initial={false}>
    {copied ? (
      <motion.span
        key="checkmark"
        variants={variants}
        initial="hidden"
        animate="visible"
        exit="hidden"
      >
        <CheckmarkIcon />
      </motion.span>
    ) : (
      <motion.span
        key="copy"
        variants={variants}
        initial="hidden"
        animate="visible"
        exit="hidden"
      >
        <CopyIcon />
      </motion.span>
    )}
  </AnimatePresence>
</button>

Use key props on animating elements

Make sure you have a key prop on the element you're animating with AnimatePresence. Otherwise, the component won't be unmounted and the exit animation won't be triggered.

• popLayout mode makes exiting children to be "popped" out of the page layout. This allows surrounding elements to move to their new layout immediately. This is useful for delete animations in lists for example.