Fade InHoverStagger ListLayout ShiftModal BackdropPage TransitionRotateScale UpScroll ParallaxShape MorphingSlide UpText Typing

Page Transition Animation (Framer Motion)

Framer Motion Page Transition Preview

Current Path: /animations/framer/page-transition

This content fades and slides in when the route changes. Click the button below to "simulate" a route change.

Code Snippet


// components/FM_PageTransition.tsx
import { AnimatePresence, motion } from "framer-motion";

export const FM_PageTransition = ({ children, keyProp }) => (
  <AnimatePresence mode="wait">
    <motion.div
      key={keyProp}
      initial={{ opacity: 0, x: 50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -50 }}
      transition={{ duration: 0.5, ease: "easeInOut" }}
      className="p-8 bg-white rounded-xl shadow-lg"
    >
      {children}
    </motion.div>
  </AnimatePresence>
);

Explanation

  • AnimatePresence: Handles mounting/unmounting animations when content changes.
  • initial: Sets the starting opacity and horizontal offset (x: 50).
  • animate: Moves to opacity: 1 and x: 0.
  • exit: Fades out and slides left when unmounting.
  • transition: Smooth easing with easeInOut.