[website] Improve pricing page tree view animation

[oliviertassinari]

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

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.

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

[mui-bot]

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 🚫 dangerJS against eefc51a

[zanivan]

I agree that the open/close interaction could be quicker, so I’m all for it!

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.

[oliviertassinari]

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:

material-ui/packages/mui-material/src/styles/createTransitions.js

Line 60 in 4bed60a

easing: easingOption = mergedEasing.easeInOut,

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.