[charts][docs] Revise the Charts Animation doc (DX-36) #18990
Conversation
|
Deploy preview: https://deploy-preview-18990--material-ui-x.netlify.app/ Updated pages: Bundle size report
|
| @@ -5,53 +5,68 @@ productId: x-charts | |||
|
|
|||
| # Charts - Animation | |||
There was a problem hiding this comment.
TIL that this h1 is necessary even though we have title defined in the frontmatter above. Isn't that redundant?
There was a problem hiding this comment.
Probably yeah, I think the frontmatter one is used for the page title only? Not sure 🤔
There was a problem hiding this comment.
It used to be the case that the # was only necessary if you wanted the page's h1 to be different from the title (for SEO purposes, for instance, to add the Pro/Premium icons). Not sure when or why this changed.
CodSpeed Performance ReportMerging #18990 will not alter performanceComparing Summary
Footnotes |
|
I've noticed this PR and remembered we had a task to add motion as one of the examples. I've create a separate PR for it here: #18993 |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Signed-off-by: mapache-salvaje <71297412+mapache-salvaje@users.noreply.github.com>
| You can override the default CSS classes to customize CSS-based animations. | ||
| The demo below shows how to do this by adding an animated color gradient to the label text: |
There was a problem hiding this comment.
This animation example is weird. It only shows how to add a new animation to an element, rather than updating one of our animations.
@bernardobelchior WDYT about replacing it with something like, changing the timing of the slice animation?
There was a problem hiding this comment.
This is replacing the default animation of the pie arc label with a custom one. Isn't that what you mean by "updating the animation"?
There was a problem hiding this comment.
Ah true, though the animation itself is a bit odd, as it doesn't serve a clear purpose. 🤔
There was a problem hiding this comment.
Any suggestion? I'm open to improving it!
There was a problem hiding this comment.
I was thinking something that slightly changes the current animations, rather than completely replace it.
Maybe just add a delay to the animation start and make the animation longer overall? The original opacity animation I mean.
There was a problem hiding this comment.
It can be done as a next step though, not necessary to be in this PR
There was a problem hiding this comment.
Sounds good. Stored it in my todo
|
|
||
| ### Using React Spring | ||
| ## Third-party animation libraries |
There was a problem hiding this comment.
Is the third-party required here? I suppose if we say Animation libraries is is implied that they are not ours 🤔
There was a problem hiding this comment.
I wouldn't say required, but it is possible that MUI could have its own animation lib(s) so I think it's worth stating explicitly. We usually try to call out "third-party" resources to make it clear that they're beyond our control, if nothing else.
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Signed-off-by: mapache-salvaje <71297412+mapache-salvaje@users.noreply.github.com>
part of the ongoing auditing project, currently tackling the Charts docs alphabetically (DX-15)