Back to prompts
Implement beautiful page transitions in Next.js. Transition Types: 1. Fade: Simple opacity transition 2. Slide: Directional slide based on navigation 3. Scale: Zoom in/out effect 4. Shared Layout: Morphing elements between pages 5. Stagger: Elements animate in sequence Implementation: - Framer Motion AnimatePresence - Next.js App Router compatible - Preserve scroll position option - Loading state during transition - Page Exit Animations: - Elements fade/slide out - Staggered children exit - Smooth height collapse - Background color transition Page Enter Animations: - Hero elements animate in first - Content fades up with stagger - Images scale from 0.95 to 1 - Text reveals with clip-path Performance: - Use transform and opacity only - will-change hints - Reduced motion media query support
Related Prompts
View allDelightful Micro-Interactions
Create a library of micro-interactions for UI polish. Button Interactions: - Ripple effect on click...
Micro-interactionsUX
Advanced Scroll Animations
Create scroll-triggered animations library. Animation Types: 1. Fade In: Opacity 0 to 1 on scroll i...
ScrollGSAP
Isometric Digital Ecosystem Landing Page
Role: Lead Creative Technologist & Motion Designer (specializing in 3D-for-web and interactive story...
IsometricFramer Motion
Premium SaaS Landing Page Template
Role: You are an expert Senior Frontend Engineer and UI/UX Designer specializing in high-end, dark-t...
Next.jsTailwind CSS