search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[website] Improve pricing page tree view animation #44490

Open oliviertassinari opened 1 day ago

oliviertassinari commented 1 day ago

Go to https://mui.com/pricing/ and open the tree view:

SCR-20241121-cqjl

I got frustrated with the speed of opening. This feels like a bug introduced in #43466.

The fix is to rely on https://m1.material.io/motion/duration-easing.html#duration-easing-dynamic-durations.

A side note, the performance of this interaction is not production compatible, it takes 100ms to start the animation on a high-end laptop, too slow.

SCR-20241121-coht

👉 https://deploy-preview-44490--material-ui.netlify.app/pricing/

mui-bot commented 1 day ago

Netlify deploy preview

https://deploy-preview-44490--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against eefc51a0c219b129491aaf1660f58019e3a8c664

oliviertassinari commented 10 hours ago

That said, I’d suggest adding a bit more easing to the animation, specially while opening—is that possible? Keeping the same duration would work, but maybe we could add an ease-in-and-out effect.

@zanivan This animation uses the default easing: https://github.com/mui/material-ui/blob/4bed60a9e8ec86e4fe713a3af289ba97287d2a84/packages/mui-material/src/styles/createTransitions.js#L60 So it's the standard easing https://m1.material.io/motion/duration-easing.html#duration-easing-natural-easing-curves.

By "a bit more easing", do you mean the animation duration should be slower? I'm not sure to get your point.