View animations

Motion's view() function makes it simple to animate between two different views or layouts.

// Crossfade
view(update).enter({ opacity: 1 })

View animations have a number of unique superpowers:

Layout: Animate discrete changes in layout, like switching justify-content between "flex-start" and "flex-end".

Shared element transitions: Animate entirely different elements across two views. For example, this underline element moves like a single element, but each is generated entirely with CSS on the .selected tab.

Page effects: Add effects to the entire viewport, like wipes, slides and crossfades:

view() is built on the browser's native View Transition API for small filesize and great performance.

It aims to remove the complexity of the View Transition API for a cleaner and more robust codebase, as well as expanding on its limitations.

Important: view() is currently in alpha, which means the API might change. It's also exclusive to Motion+ members, who are encouraged to help us shape the API via our private Discord.

As an early access API, there are many more features to come, such as:

• Smoother interruption handling

• Automatic view-transition-name

• Enter/exit animations