Post

To animate a transition, you can add <ViewTransition> around part of the app to declare “what” to animate. ViewTransition activates "when" an update is caused by an animation trigger like startTransition, useDeferredValue, or Suspense, and "how" to animate is defined in CSS.

For shared element transitions, you can add a “name”. This will animate an item from one part of the app to another: <ViewTransition name={id}>

ViewTransitions can also be triggered by useDeferredValue and animate lists:

1 repost8 likes

Activity is also ready to try in react@experimental. Activity is a new component to hide and show parts of the UI: <Activity mode={isVisible ? 'visible' : 'hidden'}>

Activity allows you to pre-render parts of the app the user is likely to visit next, or restore state when a user returns to part of the app, so state like input fields isn’t lost:

When using the <title> component inside a child component of <Activity>, the tab title is set even when mode is 'hidden'. Here the tab title is set to 'Posts': <Activity mode='hidden'> <BlogPosts /> <-- uses <title>Posts</title> </Activity> Is that intended?