Skip to content

fix(animation): map ease-out and ease-in-out to the correct CSS bezie… - #7931

Merged
PavelVanecek merged 1 commit into
recharts:mainfrom
charan-rathore:fix/css-named-easing-swap
Oct 8, 2026
Merged

fix(animation): map ease-out and ease-in-out to the correct CSS bezie…#7931
PavelVanecek merged 1 commit into
recharts:mainfrom
charan-rathore:fix/css-named-easing-swap

Conversation

@charan-rathore

@charan-rathore charan-rathore commented Oct 8, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Description

src/animation/easing.ts had the two named CSS curves crossed: ease-out returned [0.42, 0, 0.58, 1] and ease-in-out returned [0, 0, 0.58, 1]. This swaps the two control-point tuples so they match the CSS Easing spec (ease-out = cubic-bezier(0, 0, 0.58, 1), ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)).

Related Issue

Fixes #7930

Motivation and Context

Any animation prop set to easing="ease-out" was actually running the ease-in-out curve, and the other way round. At 25% progress ease-out should produce ≈ 0.378; recharts produced ≈ 0.129.

How Has This Been Tested?

  • Updated test/animation/easing.spec.ts expectations — the previous values pinned the swapped curves — and the JavascriptAnimate progress spec (progress 0.7 now yields 0.87, was 0.81).
  • Added test/animation/easing.named.spec.ts, which asserts each named curve matches its explicit bezier across several progress values.
  • Full unit suite: 8149 tests passing. tsc clean for both lib and tests, eslint clean.

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

  • Updates
    • Updated the ease-out and ease-in-out animation presets, changing how animations progress over time when these easing options are used. Animations using either preset may now feel different, with progress following the updated curve. Other easing options are unchanged.

@coderabbitai

coderabbitai Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: d373e286-a717-4f07-a08b-ad52e8000c84
📥 Commits

Reviewing files that changed from the base of the PR and between e6c5168 and 647da42.

📒 Files selected for processing (4)
  • src/animation/easing.ts
  • test/animation/JavascriptAnimate.progress.spec.tsx
  • test/animation/easing.named.spec.ts
  • test/animation/easing.spec.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The named ease-out and ease-in-out Bézier curves now use their specified control points. The easing tests and an animation progress expectation are updated.

Changes

Named easing curves

Layer / File(s) Summary
Correct named curve mappings
src/animation/easing.ts, test/animation/easing.spec.ts, test/animation/easing.named.spec.ts, test/animation/JavascriptAnimate.progress.spec.tsx		 ease-out and ease-in-out now use the specified Bézier control points. Tests compare named curves with explicit control points and update expected easing and animation progress values.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 647da

The named easing curves now match the requested CSS mappings, and the corresponding tests cover them. No material merge risk was identified.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the animation fix and the affected CSS easing mappings.
Description check ✅ Passed The description covers the change, issue, motivation, testing, and change type. It also reports added tests and validation results, although the corresponding test checklist item is not marked.
Linked Issues check ✅ Passed Issue #7930 requires the CSS mappings ease-out = [0, 0, 0.58, 1] and ease-in-out = [0.42, 0, 0.58, 1]. The diff implements both mappings in src/animation/easing.ts. The diff updates the name…
Out of Scope Changes check ✅ Passed The changes are limited to the two named easing mappings and related unit and progress tests. The test changes directly verify issue #7930 behavior. No unrelated production behavior or unrelated files…
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Oct 8, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

@codecov

codecov Bot commented Oct 8, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.97%. Comparing base (e6c5168) to head (647da42).

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #7931   +/-   ##
=======================================
  Coverage   88.97%   88.97%           
=======================================
  Files         647      647           
  Lines       15872    15872           
  Branches     4172     4169    -3     
=======================================
  Hits        14122    14122           
  Misses       1556     1556           
  Partials      194      194

☔ View full report in Codecov by Harness.
📢 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.

@flakiness-io

flakiness-io Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown

Test Results Summary

This comment shows the latest test results for this pull request.

Commit Status Test Results CI Runs
647da42 ✅ Passed 3078 passed · 531 skipped 9 runs

View full report

ℹ️ About Flakiness.io in GitHub

Your team has set up Flakiness.io pull request comments. This comment is updated when

  • The first test results arrive for this pull request
  • A later run reports more results for the same commit
  • A new commit is pushed and tested

Flakiness.io rewrites the comment in place, so it always reflects the most recently tested commit.

@PavelVanecek
PavelVanecek merged commit 189c0d7 into recharts:main Oct 8, 2026
64 checks passed
@charan-rathore
charan-rathore deleted the fix/css-named-easing-swap branch October 8, 2026 05:59
charan-rathore added a commit to charan-rathore/charan-rathore that referenced this pull request Oct 8, 2026
@charan-rathore
Add merged recharts/recharts#7931 to contributions
5cd70ab
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@PavelVanecek PavelVanecek PavelVanecek approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

ease-out and ease-in-out animation easings are swapped

2 participants

@charan-rathore @PavelVanecek