React Example

Shared layout animation

An example of a shared layout animation, where two elements are animated from one to the other, using Motion for React's simple layoutId prop.

Motion Studio

Enhance your AI code editor with this example

Use Motion Studio to create new components or infuse static designs with animations based on "Shared layout animation" and 330+ other examples.

Discover Motion Studio

Add exit animations to React components when they're removed from the page.

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

Create React animation with Motion components. Learn variants, gestures, and keyframes.

Smoothly animate layout changes and create shared element animations.

Add exit animations to React components when they're removed from the page.

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

Create React animation with Motion components. Learn variants, gestures, and keyframes.

Smoothly animate layout changes and create shared element animations.