Skip to content

Commit 37f759a

Browse files
committed
chore: animate prop, remove @experimental tag
1 parent 9aa3d35 commit 37f759a

File tree

2 files changed

+33
-8
lines changed

2 files changed

+33
-8
lines changed

src/types/props.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -246,10 +246,9 @@ export interface PropsBase {
246246
*/
247247
showWeekNumber?: boolean;
248248
/**
249-
* Experimental. Animate navigating between months.
249+
* Animate navigating between months.
250250
*
251251
* @since 9.6.0
252-
* @experimental
253252
* @see https://daypicker.dev/docs/navigation#animate
254253
*/
255254
animate?: boolean;

website/docs/docs/navigation.mdx

+32-6
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,6 @@ To animate the transition between months, set the `animate` prop to `true`:
104104
<Examples.Animate />
105105
</BrowserWindow>
106106

107-
:::warning Experimental Feature
108-
109-
The `animate` prop is experimental and may change in the future. Please note that advanced animations may be limited by the table HTML structure. Please report any issues in the [GitHub Discussions](https://github.com/gpbl/react-day-picker/discussions).
110-
111-
:::
112-
113107
### Customizing the Animation
114108

115109
Use the supported CSS variables to customize the animation duration or timing function:
@@ -137,6 +131,38 @@ To improve accessibility for users who prefer reduced motion, you can use the `p
137131
}
138132
```
139133

134+
### Changing the Animation Functions
135+
136+
For a more advanced customization, you can change override the default style with your own animation functions:
137+
138+
```css
139+
.rdp-caption_after_enter {
140+
animation:; /* Your value here */
141+
}
142+
```
143+
144+
<details>
145+
<summary>Class Names Used For Animations</summary>
146+
147+
| Class Name | Description |
148+
| --------------------------- | ---------------------------------------------------- |
149+
| `.rdp-caption_after_enter` | Caption animation for the month after, when enters. |
150+
| `.rdp-caption_after_exit` | Caption animation for the month after, when exits. |
151+
| `.rdp-caption_before_enter` | Caption animation for the month before, when enters. |
152+
| `.rdp-caption_before_exit` | Caption animation for the month before, when exits. |
153+
| `.rdp-weeks_before_enter` | Weeks animation for the month before, when enters. |
154+
| `.rdp-weeks_before_exit` | Weeks animation for the month before, when exits. |
155+
| `.rdp-weeks_after_enter` | Weeks animation for the month after, when enters. |
156+
| `.rdp-weeks_after_exit` | Weeks animation for the month after, when exits. |
157+
158+
</details>
159+
160+
:::warning Advanced Feature
161+
162+
Customizing the animation function, such as for a up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in [DayPicker Discussions](https://github.com/gpbl/react-day-picker/discussions).
163+
164+
:::
165+
140166
## Disabling the Navigation {#disablenavigation}
141167

142168
To prevent the user from navigating between months, set the `disableNavigation` prop to `true`.

0 commit comments

Comments
 (0)