Demystifying Framer Motion layoutId: Generating Shared Animations with AI
If you want your React application to feel like a native iOS or Android app, shared element transitions are non-negotiable. When a user clicks a small thumbnail and it smoothly expands into a full-screen modal, it creates a premium user experience. In the React ecosystem, Framer Motion's layoutId prop is the magic wand that makes this happen.
However, layoutId can be incredibly frustrating. If your DOM trees don't match perfectly, or if you forget to wrap your components in an AnimatePresence, the animation will snap, break, or distort. Instead of fighting with CSS transforms, you can use these engineered AI prompts to generate flawless, production-ready shared layout animations.
Prompt 1: The Expandable Card Component
The most common use case for layoutId is an image gallery or a list of items that expand when clicked. This prompt instructs the AI to build both the "List View" and the "Expanded View," correctly linking them with matching IDs.
"Act as a Senior Creative Frontend Developer. Write a React component using Framer Motion and Tailwind CSS that implements an expandable card UI. Create a list of 3 items. When an item is clicked, it should smoothly expand into a centered modal using the 'layoutId' prop. Ensure the 'motion.div' elements for the image and the title share the exact same 'layoutId' strings between the list state and the expanded state. Wrap the expanded state in an 'AnimatePresence' to allow for an exit animation."Prompt 2: The Magic Navigation Underline
Another iconic use of layoutId is the sliding underline on a navigation menu. As the user clicks different tabs, the active indicator smoothly glides across the screen to the new tab.
"Write a sleek, modern Navigation Tab component in React using Framer Motion and Tailwind CSS. The component should accept an array of tab names. When a tab is active, a 'motion.div' acting as a bottom border indicator should appear. Use the 'layoutId' prop (e.g., layoutId='active-tab') so that when the active state changes, the indicator physically slides from the previous tab to the newly selected tab. Use a spring transition for a natural feel."The Golden Rule of layoutId
Pro Tip: The AI will usually handle this correctly based on the prompts, but always remember: for a shared element transition to work, the layoutId string must be exactly identical on both the component mounting and the component unmounting. Furthermore, they cannot exist in the DOM at the exact same time without confusing the physics engine.
Need Prompts for GSAP or Three.js?
Scale your frontend development. Browse our directory of optimized AI prompts designed specifically for React developers and UI engineers.
Explore Web Component Prompts