# React UI animations Techniques for animating user-interface elements in React applications, commonly using state-driven rendering with CSS or browser animation APIs. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## React 19.3 DevFeed: [React 19.3]() Original publisher: [Read original article]() Author: The React Team Published: 2026-09-09T00:00:00Z Content type: release Language: en Sources: [React Blog]() Topics: [React UI animations](), [web animation](), [modern web development](), [Web platform]() Tags: [animation](), [api](), [browser](), [css](), [react](), [release](), [view-transitions]() ### AI overview React 19.3 stabilizes View Transitions and Fragment Refs. The article focuses on using View Transitions to animate UI updates, with CSS and Web Animations API customization options. ### Source excerpt React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. ## Headless UI v2.1: Simplified transition API and improved multi-dialog support DevFeed: [Headless UI v2.1: Simplified transition API and improved multi-dialog support]() Original publisher: [Read original article]() Published: 2024-06-21T15:00:00Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [React](), [dialog](), [React UI animations]() Tags: [compatibility](), [components](), [dialog](), [documentation](), [install](), [react]() ### AI overview Headless UI v2.1 for React simplifies transition APIs with a new prop and data attributes for transition stages. It also supports rendering multiple sibling dialogs, with the most recently opened dialog closing on Escape or outside clicks. ### Source excerpt We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings. We've made transitions way easier in v2.1 by adding a new prop to all of the built-in components you might want to transition, and adding data attributes for each transition stage so you can add transition styles by just throwing some classes on the target element: There are four data attributes you can use to target the different stages of... ## Making Your React Native Gestures Feel Natural DevFeed: [Making Your React Native Gestures Feel Natural]() Original publisher: [Read original article]() Author: Andrew Lo Published: 2023-01-20T18:37:05Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [React Native](), [draggable](), [Mobile](), [React UI animations](), [App]() Tags: [animation](), [app](), [draggable](), [mobile](), [react-native]() ### AI overview This article explains how to make draggable React Native interfaces feel more natural. Using a Shop app Sheet component, it shows how incorporating drag velocity, position, spring animations, elasticity, and resistance can improve gesture feedback and transitions. ### Source excerpt When working with draggable elements in React Native mobile apps, there are some simple ways to help gestures and animations feel better and more natural. ## Utility-Friendly Transitions with @tailwindui/react DevFeed: [Utility-Friendly Transitions with @tailwindui/react]() Original publisher: [Read original article]() Published: 2020-08-27T18:30:00Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [React UI animations](), [Web Development]() Tags: [react](), [release](), [tailwind](), [ui](), [vue]() ### AI overview Announces the first release of @tailwindui/react, providing utility-first enter/leave transition primitives for interactive React UIs. ### Source excerpt Announcing the first release of @tailwindui/react, which introduces a component for utility-first enter/leave transitions. ## A First Look at Reanimated 2 DevFeed: [A First Look at Reanimated 2]() Original publisher: [Read original article]() Author: William Candillon Published: 2020-07-02T18:46:00Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [React Native](), [React UI animations](), [JavaScript](), [Open Source](), [Shopify]() Tags: [animation](), [javascript](), [open-source](), [react-native](), [shopify]() ### AI overview The article introduces Reanimated 2, an alpha release that changes how gestures and animations are built in React Native. Its animation worklets run JavaScript functions in an isolated context and keep interaction processing on the UI thread, avoiding reliance on the JavaScript thread for every animation frame. The article contrasts this approach with Reanimated 1's declarative domain-specific language, which had a steep learning curve, instruction limitations, initialization-time performance costs, bridge crossings, and memoization-related bugs. ### Source excerpt With Reanimated 2, the team at Software Mansion asked: "How would it look if there were no constraints when writing gestures and animations in React Native?" and started from there. ## Building Arrive's Confetti in React Native with Reanimated DevFeed: [Building Arrive's Confetti in React Native with Reanimated]() Original publisher: [Read original article]() Author: Joel Besada Published: 2020-04-07T15:30:00Z Content type: tutorial Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [React Native](), [React UI animations](), [Mobile](), [Android](), [JavaScript](), [iOS]() Tags: [android](), [animation](), [ios](), [javascript](), [mobile](), [react-native]() ### AI overview Shopify describes how the Arrive package tracking app was rewritten in React Native and launched on Android alongside its existing iOS version. The article explains implementing the app's confetti effect purely in JavaScript with declarative animations using the Reanimated library, including layout and visual improvements. ### Source excerpt Shopify is investing in React Native as our primary choice of mobile technology moving forward. As a part of this we've rewritten our package tracking app Arrive with React Native and launched it on Android--an app that previously only had an iOS version. One of the most cherished features by the users of the Arrive iOS app is the confetti that rains down on the screen when an order is delivered. ## Animate between two react components DevFeed: [Animate between two react components]() Original publisher: [Read original article]() Author: Stanko Published: 2017-10-24T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [React UI animations](), [React]() Tags: [animation](), [children](), [components](), [react]() ### AI overview A proof of concept for transitioning between two React components. It animates the parent wrapper's height while fading the previous component out and the new component in when the children prop changes. ### Source excerpt Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other. In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper. Then it will animate wrapper's height to a new component's height, fade out previous component and fade in the new one. Finally when animation is finished it will reset wrapper's height to auto. I might release it as a standalone npm component, but it needs some polishing before I do so. If you make use out of it, please share in the comments. ## Animate React component by calling 'setState' in 'componentDidMount' DevFeed: [Animate React component by calling 'setState' in 'componentDidMount']() Original publisher: [Read original article]() Author: Stanko Published: 2017-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React UI animations](), [how to create smooth CSS transitions](), [CSS](), [browser]() Tags: [animation](), [browser](), [code](), [css](), [react](), [react-component]() ### AI overview A tutorial explains why changing a React component's state in componentDidMount may fail to produce a CSS transition. It attributes the behavior to browsers merging changes made within the same animation frame, and discusses using a timeout or animation-frame approach to separate the rendered states, including inconsistent Firefox behavior. ### Source excerpt On the frontend, we do a lot of animations. Most of the simple animations I create by using CSS transitions. Either I will change class or inline style of the element, and define transitions in CSS file. Easiest way to do this in React is to render initial state, and then when it renders, change the state to apply class or style to animate. The easiest way to do it in React is to change state in componentDidMount. Setting state in componentDidMount is considered to be anti-pattern, as it forces rerender and can lead to property/layout thrashing. But in our case, that is exactly what we want to do. When we do that, we hit the wall - only second state is rendered and there is no transition between two states. It happens because of browsers optimization - browsers are not rerendering stuff that changed in the same animation frame. But they merge changes and render the end result. The problem I just described is not React exclusive, but browser related. Same will happen if we try something like this: const element = document.querySelector('.AnimateMe'); element.style.height = '50px'; element.style.height = '250px'; So let's start with example of the problem. Animate component by changing state in componentDidMount doesn't work # The scenario I described above. Element height depends on this.state.animation property. It is initially set to false and element height should be 50px. In componentDidMount we'll change the value of this.props.animation to true and element height should be 250px. As we added transition, it should animate. But it doesn't as all of this happens really fast, and browser decides to merge changes and render only the end result. This way our element immediately gets height of 250px. import React, { Component } from 'react'; export default class AnimateMe extends Component { constructor(props) { super(props); this.state = { animate: false, }; } componentDidMount() { this.setState({ animate: true }); } render() { return (