← Back to Motion & Animation

Smooth transitions between pages and views create continuity and help users understand spatial relationships. Choose transitions that match your content structure and user mental models.

1

Page 1

Slide Horizontal

Pages slide left/right with spatial continuity

Best for: Navigation flows, wizard steps, carousel-like content

Slide Vertical

Pages slide up/down for hierarchical navigation

Best for: Modal overlays, detail views, mobile navigation

Scale & Fade

Pages scale and fade for focus transitions

Best for: Card expansions, focus changes, modal dialogs

Rotate Flip

Pages rotate on axis for dramatic transitions

Best for: Creative portfolios, image galleries, card reveals

Stack Layers

Pages stack and unstack with depth

Best for: Layered navigation, settings panels, progressive disclosure

Cross Dissolve

Simple fade for content-focused transitions

Best for: Content updates, subtle page changes, accessibility-friendly

Route-Based Transitions

// React Router + Framer Motion
import { AnimatePresence, motion } from 'framer-motion'
import { useLocation } from 'react-router-dom'

function AnimatedRoutes() {
  const location = useLocation()

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location.pathname}
        initial={{ x: 300, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        exit={{ x: -300, opacity: 0 }}
        transition={{ duration: 0.3 }}
      >
        <Routes location={location}>
          {/* Your routes */}
        </Routes>
      </motion.div>
    </AnimatePresence>
  )
}

Next.js Page Transitions

// _app.js with Framer Motion
import { AnimatePresence, motion } from 'framer-motion'

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence
      mode="wait"
      onExitComplete={() => window.scrollTo(0, 0)}
    >
      <motion.div
        key={router.asPath}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.3 }}
      >
        <Component {...pageProps} />
      </motion.div>
    </AnimatePresence>
  )
}

Choosing Transitions

  • • Horizontal slides: Linear navigation (tabs, steps)
  • • Vertical slides: Hierarchical navigation
  • • Scale transitions: Focus changes, modal opening
  • • Rotate effects: Creative content, portfolios
  • • Fade transitions: Content updates, accessibility
  • • Stack layers: Progressive disclosure

Performance Guidelines

  • • Keep transitions under 500ms for perceived speed
  • • Use transform and opacity for GPU acceleration
  • • Avoid animating layout properties
  • • Consider mobile performance limitations
  • • Provide reduced-motion alternatives
  • • Test on slower devices and connections

Accessibility

  • • Respect prefers-reduced-motion
  • • Provide instant alternatives for slow animations
  • • Ensure focus management during transitions
  • • Use ARIA live regions for screen readers
  • • Test with keyboard navigation

User Experience

  • • Maintain spatial relationships
  • • Use consistent transition directions
  • • Provide loading states for slow pages
  • • Consider user's mental model
  • • Test on various screen sizes

Technical

  • • Handle route changes and back button
  • • Manage scroll position properly
  • • Clean up animations on unmount
  • • Consider SEO implications
  • • Monitor performance metrics