Collapsible duration ratio based on content size

[alex-page]

Feature request summary

As mentioned here, we should have motion that is consistent with the height of the element. Bigger elements should not feel the same speed as smaller ones.

#3606 (comment)

How is duration determined? If the value is fixed, a 500px collapse will be perceived as 10x the speed of a 50px collapse.

Dynamic containers benefit from dynamically determined durations. @AndrewMusgrave and I collaborated once to create a dynamic interpolation with normalized speed and clamped min/max values. Could that perhaps be applied?

[johanstromqvist]

Based on this.

I recommend a dynamic duration. What those values should be needs to be tested, but they might be along the lines of min: 150ms for ≤100px and max: 500 for ≥1000px, and linearly interpolated in between. Speeds would vary between 0.7px/ms and 2px/ms, which is ok. It's more important to normalize and avoid overly fast or overly slow transitions, than it is to have perfectly consistent speed. E.g. 1px/ms does not result in the best UX at all speeds.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's design system and dev experience.