# Animating React Child Component Mount/Unmount with CSS View Transitions Ever wanted a simple way to animate React components when they appear (mount) or disappear (unmount), like when switching tabs or loading new content? The CSS View Transitions API offers a modern, straightforward solution. This guide will walk you through creating a smooth fade animation for these scenarios. You can see a live example of the concepts discussed in this post in action on CodeSandbox: [Live Demo](https://codesandbox.io/p/sandbox/hungry-bush-scmsh7?file=%2Fsrc%2Fstyles.css%3A1%2C1-69%2C1). We'll build a reusable `FadeTransition` component that leverages this new browser API. ## Prerequisites - A basic understanding of React (components, state, hooks). - A browser that supports View Transitions (e.g., Chrome, Edge - check caniuse.com for current support). ## Step 1: Understanding `document.startViewTransition` The core of this new API is `document.startViewTransition()`. When you want to make a DOM change that should be animated, you wrap your state update (that causes the DOM change) within a call to this function. For more in-depth details, you can refer to the [MDN Web Docs on CSS View Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_view_transitions). ```javascript // Basic idea if (document.startViewTransition) { document.startViewTransition(() => { // Update React state here setMyData(newData); }); } else { // Fallback for unsupported browsers setMyData(newData); } ``` The browser then handles capturing a "before" snapshot, an "after" snapshot, and animates between them. ## Step 2: Creating the `FadeTransition` React Component Let's create a React component to manage this. This component will wrap the children you want to animate. When these children change, it will use `document.startViewTransition`. Create a file, for example, `FadeTransition.tsx`: ```typescript // FadeTransition.tsx import React, { useState, useEffect, useRef, ReactNode } from "react"; interface FadeTransitionProps { uniqueKey?: string; // An optional key to explicitly tell React when content is considered "new" } export const FadeTransition = ( props: React.PropsWithChildren ) => { const [renderedChildren, setRenderedChildren] = useState( props.children ); const prevUniqueKey = useRef(props.uniqueKey); useEffect(() => { // This condition checks if a uniqueKey is provided and has changed, // OR if no uniqueKey is provided (in which case it might trigger more often, // relying on the parent component's re-render to signify a change). // The primary trigger for changes with this setup is often the change in props.children itself. if ( (props.uniqueKey && props.uniqueKey !== prevUniqueKey.current) || !props.uniqueKey // If no key, assume transition is desired when children prop changes ) { if (document.startViewTransition) { document.startViewTransition(() => { setRenderedChildren(props.children); }); } else { // Fallback for browsers that don't support View Transitions setRenderedChildren(props.children); } } // Always update prevUniqueKey if a uniqueKey is provided if (props.uniqueKey) { prevUniqueKey.current = props.uniqueKey; } // The dependency array includes props.children and props.uniqueKey, allowing the user to also externally manage the transition // if its change is meant to explicitly trigger the effect independently of props.children changing reference. }, [props.children, props.uniqueKey]); // The `view-transition-name: fade;` style is crucial. // It names this specific transition, allowing us to target it with CSS. return (

{renderedChildren}

); }; ``` **Explanation of `FadeTransition.tsx`:** - **`renderedChildren` State:** We hold the children to be rendered in local state. This allows us to control _when_ the new children are actually rendered on screen (inside the `startViewTransition` callback). - **`useEffect` Hook:** This hook listens for changes in `props.children` (and `props.uniqueKey`). - When `props.children` (or `uniqueKey`) changes, it checks if View Transitions are supported. - If yes, it calls `document.startViewTransition()`, and inside the callback, it updates `renderedChildren` to `props.children`. This is the magic moment where the browser knows to animate the change. - If not supported, it updates `renderedChildren` directly. - **`prevUniqueKey` Ref:** Stores the previous `uniqueKey` to compare against the current one. - **`style={{ viewTransitionName: "fade" }}`:** This is vital. It assigns a name ("fade") to this transition. We'll use this name in our CSS to define the animation. - **Dependency Array:** `[props.children, props.uniqueKey]` ensures the effect runs when the children passed to `FadeTransition` change or the `uniqueKey` changes. ## Step 3: Adding the CSS for the Fade Animation Now, we need to tell the browser _how_ to animate when a transition named "fade" occurs. Create or update your main CSS file (e.g., `styles.css`): ```css /* styles.css */ /* ::view-transition-old(fade) Targets the "old" view (the content that's disappearing). We make it fade out. */ ::view-transition-old(fade) { animation: fadeOut 0.3s ease-out forwards; } /* ::view-transition-new(fade) Targets the "new" view (the content that's appearing). We make it fade in. */ ::view-transition-new(fade) { animation: fadeIn 0.3s ease-in forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` **Explanation of the CSS:** - **`::view-transition-old(fade)`:** This pseudo-element targets the snapshot of the content _before_ the change (the old content). We apply a `fadeOut` animation to it. - **`::view-transition-new(fade)`:** This targets the snapshot of the content _after_ the change (the new content). We apply a `fadeIn` animation. - **`@keyframes`:** These define the actual `fadeIn` and `fadeOut` animations, simply changing the opacity. The `forwards` keyword ensures the element remains in its end state after the animation. ## Step 4: Using the `FadeTransition` Component Now, let's use our `FadeTransition` component in an example application, like a simple tab switcher. ```typescript // App.tsx (Example Usage) import React, { useState } from "react"; import { FadeTransition } from "./FadeTransition"; // Assuming it's in the same folder import "./styles.css"; // Your main CSS file export default function App() { const [activeTab, setActiveTab] = useState("tab1"); return (

Smooth Tab Transitions with CSS View Transitions

{/* Wrap the conditionally rendered content with FadeTransition */} {/* Pass activeTab as uniqueKey to help identify distinct content states */} {activeTab === "tab1" && (

Card 1

This is the content of card 1. It fades in and out smoothly!

)} {activeTab === "tab2" && (

Card 2

This is the content of card 2. View Transitions make this easy.

)}

); } ``` **Explanation of `App.tsx`:** - We have two tabs. Clicking a tab updates the `activeTab` state. - The content for each tab (the "cards") is conditionally rendered based on `activeTab`. - This conditionally rendered content is wrapped by our `` component. - We pass `activeTab` as the `uniqueKey` to `FadeTransition`. This helps our component explicitly know when the content represents a new logical view. The uniqueKey in this case is not mandatory, you can also drop it. ## Step 5: Testing Run your React application. When you switch between Tab 1 and Tab 2, you should see the content of the cards smoothly fade out and fade in. If your browser doesn't support View Transitions, the content will still update, but without the animation. ## Caveats and Considerations While CSS View Transitions are powerful, there are a few things to keep in mind: - **UI Interactivity During Animation:** During the view transition animation (the 0.3s fade in our example), the browser is focused on rendering the transition smoothly. This means that user interactions with the content involved in the transition (both the old and new views) might be queued or feel unresponsive until the animation completes. For instance, if new content with a button fades in, that button might not be clickable until the fade-in animation is finished. - **Impact on Interaction to Next Paint (INP):** CSS View Transitions do not negatively impact the Interaction to Next Paint (INP) metric. ![Bildschirmfoto-2025-05-24-um-09-06-57](https://i.ibb.co/G4Pgfmmb/Bildschirmfoto-2025-05-24-um-09-06-57.png) ## Browser Support and Fallbacks As of mid 2025 CSS View Transitions are supported in modern versions of Chrome, Edge, and Opera. Support in Firefox is available behind a flag, and Safari has it shipped in version 18. It's always a good idea to check [caniuse.com](https://caniuse.com/?search=view%20transitions) for the latest browser compatibility information. Our `FadeTransition` component includes a basic fallback: ```javascript if (document.startViewTransition) { // ... use view transition } else { // Fallback for browsers that don't support View Transitions setRenderedChildren(props.children); } ``` This ensures that your application remains functional in browsers that don't yet support the API, with the content updating immediately without the animation. ## Conclusion CSS View Transitions provide a powerful, browser-native way to create smooth and meaningful animations when content changes in your React application. By encapsulating the `document.startViewTransition` logic within a reusable component like `FadeTransition`, you can easily enhance user experience by animating the mounting and unmounting of child components. This modern CSS feature simplifies what was often a complex task, allowing for more engaging and visually appealing web interfaces with less JavaScript overhead. As browser support continues to expand, View Transitions are set to become an essential tool for frontend developers.

About the Author

Subscribe to the Newsletter