Back to Dictionary
Page & View Transitions
●●●Requires Setup
Shared Element Transition
An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.
Live Demo
Mountain Retreat
Escape to nature
Sunny Beach
Relax by the ocean
City Lights
Urban exploration
What It Is
An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.
✓When to Use
- Image galleries opening to full screen
- App store cards expanding into detail pages
- Profile avatars moving to header banners
✕When NOT to Use
- Simple form steps
- Where the element drastically changes aspect ratio (can look distorted)
Configuration Tips
- 01Use Framer Motion layoutId for effortless shared element transitions
- 02Animate other surrounding content fading out quickly so they don't clash with the moving element
You've Seen It In
iOS App StoreFramer SitesGoogle Photos
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a shared element transition where clicking a card makes the image grow smoothly to cover the top of the detail page.
Code Example (Tailwind CSS)
export function SharedElementTransitionDemo() {}