[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.

[zanivan]

@oliviertassinari, I was suggesting we try the easeInOut, but it turns out that’s already the one we’re using. I did think it could be a bit slower, but we should go ahead and merge this—after testing the pricing table a few times while adding the Enterprise plan, the current slowness gets really annoying 😅

[oliviertassinari]

@zanivan I feel like the challenge is to find the right function that returns the animation duration based on the height. We could hardcode the duration for each collapse, but I'm worried that this will get broken anytime we change the number of rows, it's so easy to overlook.