Skip to content

fix: CSS animations not being removed from the stylesheet on web #7932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 29, 2025

Conversation

MatiPl01
Copy link
Member

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

Screen.Recording.2025-07-29.at.15.24.55.mp4

After

Screen.Recording.2025-07-29.at.15.23.45.mp4

Test example

Code snippet
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',
          }}
        />
      )}
    </>
  );
}

@MatiPl01 MatiPl01 self-assigned this Jul 29, 2025
@MatiPl01 MatiPl01 requested review from m-bert and tomekzaw July 29, 2025 13:35
@MatiPl01 MatiPl01 added this pull request to the merge queue Jul 29, 2025
Merged via the queue into main with commit db47998 Jul 29, 2025
11 checks passed
@MatiPl01 MatiPl01 deleted the @matipl01/fix-css-animations-not-cleaned-up branch July 29, 2025 13:41
MatiPl01 added a commit that referenced this pull request Jul 31, 2025
## 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>
MatiPl01 added a commit that referenced this pull request Jul 31, 2025
@MatiPl01 MatiPl01 mentioned this pull request Jul 31, 2025
15 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants