framer_motion_animate_presence_page_transition_quickstart.ts

1import * as React from "react"
2import { motion, AnimatePresence } from "framer-motion"
3
4/**
5 * In a real application, 'isVisible' would represent a change in 
6 * route or state that triggers a page-level transition.
7 */
8export const PageTransitionExample = ({ isVisible }: { isVisible: boolean }) => (
9  <AnimatePresence>
10    {isVisible && (
11      <motion.div
12        initial={{ opacity: 0, x: -20 }}
13        animate={{ opacity: 1, x: 0 }}
14        exit={{ opacity: 0, x: 20 }}
15        transition={{ duration: 0.3 }}
16      >
17        <h1>Page Content</h1>
18      </motion.div>
19    )}
20  </AnimatePresence>
21)