Motion Vision Logo

Page transitions shape the flow between views

Smooth transitions make navigation feel more connected, more readable, and more intentional

Preview of page 1

A classic transition where one view disappears smoothly while the next one fades into focus

Code examples show how page transitions are built in real interfaces

Fade Transition

Use opacity to smoothly replace one view with another. This is one of the safest and most universal transition patterns.

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.4, ease: "easeOut" }}
>
  {content}
</motion.div>

Slide Transition

Use horizontal movement when you want navigation to feel directional, such as moving forward through steps or screens.

<motion.div
  initial={{ x: "100%" }}
  animate={{ x: 0 }}
  exit={{ x: "-100%" }}
  transition={{
    type: "spring",
    stiffness: 240,
    damping: 28
  }}
>
  {content}
</motion.div>

Scale Transition

Use scale when you want a compact zoom effect. It works well for focused interfaces or transitions between cards and panels.

<motion.div
  initial={{ scale: 1.2, opacity: 0, filter: "blur(8px)" }}
  animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
  exit={{ scale: 0.85, opacity: 0, filter: "blur(6px)" }}
  transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
>
  {content}
</motion.div>