Motion Layout
Create beautiful immersive hero animations using shared components.
Patricia
a minute ago
Hey guys, as I promised here is my collection of vintage pictures. I hope you like it.
+1801
Run animation

Declarative

Easy as wraping your text or images with our SharedElement component.

Isolated

It does not require external state management libs.

Router Ready

Dispatch animations when changing routes using our React-Router Link component.

What?
There are amazing libraries like framer-motion that help you create animations when mounting or unmounting components. But, if two views have the same image in different positions and sizes, they cannot be animated together. With Motion Layout, you can link components together to animate them when changing views.
Get Started
Or scroll down to see it in action

Gallery

This example shows you how MotionLayout animate images using React Router.
Click on any image to navigate and dispatch the animation.

Chat

This example shows you how MotionLayout animate images and text using React Router.
Click on any message to navigate and dispatch the animation.

Friends

This example shows you how MotionLayout animate divs using React Router.
Click on any item to navigate and dispatch the animation.