# reactjs/react-transition-group

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/reactjs-react-transition-group).**

10,258 stars · 648 forks · JavaScript · other

## Links

- GitHub: https://github.com/reactjs/react-transition-group
- Homepage: https://reactcommunity.org/react-transition-group/
- awesome-repositories: https://awesome-repositories.com/repository/reactjs-react-transition-group.md

## Description

This project is a transition component library for React that manages CSS animations during the mounting and unmounting of components. It functions as a CSS class state manager and animation orchestrator, applying specific class sequences to track the entry and exit states of elements.

The library coordinates the timing and sequence of multiple elements entering or leaving the screen. This includes managing synchronized group transitions for lists and triggering visual animations when switching between different URL routes.

The system covers a range of transition capabilities, including state-driven sequencing and the coordination of component transitions to ensure a consistent visual flow during updates.

## Tags

### User Interface & Experience

- [React Libraries](https://awesome-repositories.com/f/user-interface-experience/component-transitions/react-libraries.md) — Provides a specialized set of components for managing CSS animations during the mount and unmount lifecycles in React.
- [Animation Transition Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/animation-transition-components.md) — Provides wrapper components that manage the entry and exit lifecycle of elements using CSS class sequences. ([source](https://reactcommunity.org/react-transition-group/css-transition))
- [Transition Sequencing Controls](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/transition-sequencing-controls.md) — Provides configuration and logic to manage the specific timing and order of elements entering and leaving the screen.
- [Animation Orchestrators](https://awesome-repositories.com/f/user-interface-experience/animation-orchestrators.md) — Orchestrates the timing and sequence of multiple elements entering and exiting the screen to create complex patterns.
- [DOM Persistence](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks/dom-persistence.md) — Ensures components remain in the DOM until exit animations are finished before being fully removed.
- [Component Transitions](https://awesome-repositories.com/f/user-interface-experience/component-transitions.md) — Offers declarative, state-based transitions specifically bound to the React component lifecycle.
- [Dynamic Class Management](https://awesome-repositories.com/f/user-interface-experience/dynamic-class-management.md) — Dynamically applies and toggles CSS classes to track and trigger the visual states of components.
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Provides a system for triggering browser animations by toggling semantic CSS class names based on component lifecycle events.
- [Transition Wrappers](https://awesome-repositories.com/f/user-interface-experience/transition-wrappers.md) — Provides specialized containers that wrap child components to orchestrate the timing and visibility of entry and exit animations.
- [List Transition Animations](https://awesome-repositories.com/f/user-interface-experience/list-transition-animations.md) — Coordinates the synchronized animation of multiple elements entering or leaving the screen within a group. ([source](https://reactcommunity.org/react-transition-group/))
- [Auto-Animation Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/auto-animation-transitions.md) — Automatically triggers visual transitions between different views based on route changes. ([source](https://reactcommunity.org/react-transition-group/with-react-router))
- [View Transitions](https://awesome-repositories.com/f/user-interface-experience/view-transitions.md) — Coordinates smooth animations and effects during navigation transitions between pages.

### Part of an Awesome List

- [React Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/react-animation-libraries.md) — Acts as a specialized animation library for the React ecosystem focusing on entry and exit transitions.
- [Route Transition Managers](https://awesome-repositories.com/f/awesome-lists/devtools/react-animation-libraries/route-transition-managers.md) — Triggers visual animations specifically when switching between different URL routes in a React app.

### Web Development

- [State Transition Controllers](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/state-logic-patterns/state-transition-controllers.md) — Applies transition durations and sequences to state changes to guide user attention during UI updates.
- [Route-Driven Animations](https://awesome-repositories.com/f/web-development/routing/route-driven-animations.md) — Synchronizes page swap animations by monitoring changes in route properties.