From 90ba2b89cf15e9bb25016ba01dcf9d54f303ceaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?=
 <lop.mateusz.2001@gmail.com>
Date: Tue, 29 Jul 2025 15:40:54 +0200
Subject: [PATCH] fix: CSS animations not being removed from the stylesheet on
 web (#7932)

## Summary

@m-bert noticed that animations aren't cleaned up from the Reanimated's
CSS stylesheet when components are unmounted. As a result, we ended up
having multiple instances of animations that were no longer used.

## Example recording

### Before

<video
src="https://github.com/user-attachments/assets/9e7d9987-80eb-44b0-8519-ee5a2978f2b0"></video>

### After

<video
src="https://github.com/user-attachments/assets/cb52aaca-7dab-4dfb-bd0a-98fe7e90a09a"></video>

### Test example

<details>
<summary>Code snippet</summary>

```tsx
import { useState } from 'react';
import { Button } from 'react-native';
import Animated from 'react-native-reanimated';

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <>
      <Button title="Show" onPress={() => setShow(!show)} />
      {show && (
        <Animated.View
          style={{
            backgroundColor: 'green',
            flex: 1,
            animationName: {
              from: { backgroundColor: 'red' },
              to: { backgroundColor: 'blue' },
            },
            animationDuration: '1s',
            animationTimingFunction: 'ease-in-out',
            animationDelay: '0s',
            animationIterationCount: 'infinite',
            animationDirection: 'alternate',
            animationFillMode: 'forwards',
            animationPlayState: 'running',
          }}
        />
      )}
    </>
  );
}
```
</details>
---
 .../src/css/managers/CSSAnimationsManager.web.ts              | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts b/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts
index b7d1ef0e7a5a..7e7b68cdd96e 100644
--- a/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts
+++ b/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts
@@ -91,7 +91,9 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
   }
 
   unmountCleanup(): void {
-    // noop
+    // We use setTimeout to ensure that the animation is removed after the
+    // component is unmounted (it puts the detach call at the end of the event loop)
+    setTimeout(this.detach.bind(this));
   }
 
   private detach() {