Split Animate into JavascriptAnimate and CSSTransitionAnimate by PavelVanecek · Pull Request #6175 · recharts/recharts

PavelVanecek · 2025-08-03T06:45:33Z

Description

The Animate component is overloaded, and mixes together JS animations and CSS animations with different capabilities. So let's split them!

I have replaced some of the usages but not all. I will work on the rest in separate PR.

The new variants also fix some bugs where animation was rendered with incorrect values for a single tick - compare the test suite to see, these were not visible in the browser.

It also fixes animation of ErrorBars, so now direction: y bars will scale in direction y, and direction x bars scale in direction x.

Before (look at the horizontal error bars)

Screen.Recording.2025-08-03.at.15.49.17.mov

After

Screen.Recording.2025-08-03.at.15.51.00.mov

Related Issue

#5768

Resolves #4055

Copilot

Pull Request Overview

This PR splits the overloaded Animate component into two specialized variants: JavascriptAnimate for JavaScript-based animations and CSSTransitionAnimate for CSS transition-based animations. This separation provides clearer APIs for different animation types and fixes several animation bugs.

Key changes include:

Creation of JavascriptAnimate and CSSTransitionAnimate components with focused responsibilities
Migration of chart components to use the appropriate animation variant
Bug fixes for ErrorBar animations to properly scale in the correct direction
Updated test suites reflecting the animation improvements

Reviewed Changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`src/animation/JavascriptAnimate.tsx`	New component for JavaScript-based animations with simplified API
`src/animation/CSSTransitionAnimate.tsx`	New component for CSS transition animations with style-based rendering
`src/cartesian/ErrorBar.tsx`	Updated to use CSSTransitionAnimate with correct directional scaling
`src/cartesian/Area.tsx`	Migrated from Animate to JavascriptAnimate
`src/cartesian/Bar.tsx`	Migrated from Animate to JavascriptAnimate
`src/cartesian/Line.tsx`	Migrated from Animate to JavascriptAnimate
`src/polar/Pie.tsx`	Migrated from Animate to JavascriptAnimate
`src/polar/Radar.tsx`	Migrated from Animate to JavascriptAnimate
`src/chart/Treemap.tsx`	Migrated from Animate to CSSTransitionAnimate
Test files	Updated to reflect new animation behavior and API changes

Comments suppressed due to low confidence (1)

test/animation/Animate.timing.spec.tsx:106

Using it.fails() indicates this test is expected to fail. This suggests incomplete functionality or a known bug that should be addressed rather than marked as expected to fail.

      it.fails('should call children function with current style', async () => {

Copilot · 2025-08-03T06:53:18Z

-  animation: boolean = true,
-  expectedStyles: { [key: string]: string } = {},
-) {
+function assertAnimationStyles(container: HTMLElement, animation: boolean, expectedStyles: { [key: string]: string }) {


The function signature changed to remove default parameter values which breaks backward compatibility. Consider keeping the original default parameters or adding overloads to maintain API compatibility.

Suggested change

function assertAnimationStyles(container: HTMLElement, animation: boolean, expectedStyles: { [key: string]: string }) {

function assertAnimationStyles(

container: HTMLElement,

animation: boolean = false,

expectedStyles: { [key: string]: string } = {}

) {

Copilot · 2025-08-03T06:53:19Z

+      Object.entries(expectedStyles).forEach(([key, value]) => {
+        expect(style).toContain(`${key}: ${value}`);
+      });
+      if (animation === true) {


[nitpick] Using strict equality === true is unnecessary here since the parameter is already typed as boolean. Simply use if (animation) for better readability.

Suggested change

if (animation === true) {

if (animation) {

Copilot · 2025-08-03T06:53:19Z

+            // @ts-expect-error types do not allow this
+            from="scaleY(0)"
+            // @ts-expect-error types do not allow this
+            to="scaleY{1}"


There's a syntax error in the to prop value. It should be "scaleY(1)" with parentheses, not "scaleY{1}" with curly braces.

Suggested change

to="scaleY{1}"

to="scaleY(1)"

Ah yes this is correct

Also this is in the old spec which I will be deleting soon.

Copilot · 2025-08-03T06:53:19Z

+      }
+      onAnimationEnd();
+    };
+  }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to]);


The useEffect dependency array includes to which could be a complex object that changes frequently, causing unnecessary re-renders. Consider using a ref or memoization for the to value if it's an object.

Suggested change

}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to]);

}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, memoizedTo]);

Once I delete the old Animate I will change this type to string.

Copilot · 2025-08-03T06:53:19Z

  data?: ReadonlyArray<TreemapDataType>;

+  /**
+   * @deprecated unused prop, doesn't do anything, use `key` instead


Adding a deprecation notice for animationId is good, but the component should also log a deprecation warning when this prop is used to help developers migrate away from it.

codecov · 2025-08-03T06:59:33Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.55%. Comparing base (a1e07aa) to head (2b6dd52).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6175      +/-   ##
==========================================
+ Coverage   96.53%   96.55%   +0.01%     
==========================================
  Files         217      221       +4     
  Lines       19835    19938     +103     
  Branches     4087     4117      +30     
==========================================
+ Hits        19148    19251     +103     
  Misses        681      681              
  Partials        6        6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

codecov · 2025-08-03T06:59:59Z

Bundle Report

Changes will increase total bundle size by 9.85kB (0.41%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.03MB	4.69kB (0.46%) ⬆️
recharts/bundle-es6	882.88kB	3.69kB (0.42%) ⬆️
recharts/bundle-umd	488.1kB	1.48kB (0.3%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Area.js`	-55 bytes	27.64kB	-0.2%
`chart/Treemap.js`	-647 bytes	27.23kB	-2.32%
`cartesian/Line.js`	-55 bytes	23.96kB	-0.23%
`cartesian/Bar.js`	-55 bytes	23.38kB	-0.23%
`polar/Pie.js`	-55 bytes	22.62kB	-0.24%
`cartesian/Scatter.js`	-55 bytes	20.99kB	-0.26%
`polar/RadialBar.js`	-55 bytes	18.89kB	-0.29%
`cartesian/Funnel.js`	-55 bytes	18.41kB	-0.3%
`polar/Radar.js`	-55 bytes	15.86kB	-0.35%
`animation/Animate.js`	-154 bytes	10.24kB	-1.48%
`cartesian/ErrorBar.js`	668 bytes	9.71kB	7.39% ⚠️
`animation/JavascriptAnimate.js` (New)	2.1kB	2.1kB	100.0% 🚀
`animation/AnimationManager.js`	96 bytes	1.88kB	5.39% ⚠️
`animation/CSSTransitionAnimate.js` (New)	1.85kB	1.85kB	100.0% 🚀
`animation/useAnimationManager.js` (New)	795 bytes	795 bytes	100.0% 🚀
`animation/createDefaultAnimationManager.js` (New)	426 bytes	426 bytes	100.0% 🚀

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Area.js`	-65 bytes	25.86kB	-0.25%
`chart/Treemap.js`	-651 bytes	25.67kB	-2.47%
`cartesian/Line.js`	-65 bytes	22.47kB	-0.29%
`cartesian/Bar.js`	-65 bytes	21.88kB	-0.3%
`polar/Pie.js`	-65 bytes	20.98kB	-0.31%
`cartesian/Scatter.js`	-65 bytes	19.51kB	-0.33%
`polar/RadialBar.js`	-65 bytes	17.58kB	-0.37%
`cartesian/Funnel.js`	-65 bytes	16.89kB	-0.38%
`polar/Radar.js`	-65 bytes	14.43kB	-0.45%
`animation/Animate.js`	-173 bytes	9.2kB	-1.85%
`cartesian/ErrorBar.js`	655 bytes	8.78kB	8.06% ⚠️
`animation/AnimationManager.js`	96 bytes	1.75kB	5.8% ⚠️
`animation/JavascriptAnimate.js` (New)	1.75kB	1.75kB	100.0% 🚀
`animation/CSSTransitionAnimate.js` (New)	1.64kB	1.64kB	100.0% 🚀
`animation/useAnimationManager.js` (New)	632 bytes	632 bytes	100.0% 🚀
`animation/createDefaultAnimationManager.js` (New)	265 bytes	265 bytes	100.0% 🚀

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	1.48kB	488.1kB	0.3%

PavelVanecek added 8 commits August 3, 2025 15:38

Refactor half of Animate into JavascriptAnimate functional component

e669a22

Use JavascriptAnimate in graphical items

b7ff0a3

Add animationBegin to AreaChart story

e52150f

Add a failing test for unsupported use-case

46e98cd

Add CSSTransitionAnimate

5969560

Use CSSTransitionAnimate in ErrorBar

e2143da

Use CSSTransitionAnimate in Treemap

c02402d

npm run test-build-output -- --update

2b6dd52

PavelVanecek requested a review from Copilot August 3, 2025 06:52

Copilot AI reviewed Aug 3, 2025

View reviewed changes

PavelVanecek requested a review from ckifer August 3, 2025 07:06

ckifer approved these changes Aug 3, 2025

View reviewed changes

ckifer merged commit c4ec635 into main Aug 3, 2025
27 checks passed

ckifer deleted the JavascriptAnimate branch August 3, 2025 14:55

	}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to]);
	}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, memoizedTo]);

Uh oh!

Conversation

PavelVanecek commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

PavelVanecek Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

PavelVanecek Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

PavelVanecek Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

PavelVanecek Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Aug 3, 2025

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PavelVanecek commented Aug 3, 2025 •

edited

Loading

codecov bot commented Aug 3, 2025 •

edited

Loading