[Transition] Allow overriding the easing/timing function

  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Would be nice if the Transition components(Collapse, Grow, Zoom, etc,) supported overriding the default easing function.
This could either be done the same way transitionDelay can be overridden, via style: style={{ transitionDelay: '1.1s' }}, or via a new prop, similar to timeout. I think a new prop would offer the greatest flexibility, as it could support different values for entering and exiting.

Examples 🌈

<Zoom {...something} timeout={600} style={{ transitionTimingFunction: 'cubic-bezier(0,-1.55,.61,1.58)' }}>


<Zoom {...something} timeout={600} easing="cubic-bezier(0,-1.55,.61,1.58)">

would result in the following transition: transition: transform 600ms cubic-bezier(0,-1.55,.61,1.58);


  timeout={{ enter: 600, exit:100 }}
  easing={{ enter: 'cubic-bezier(0,-1.55,.61,1.58)', exit: 'linear' }}

would result in different transitions for entering and exiting.

Motivation 🔦

While I think most people won’t need to specify custom easings for transitions, in case someone does, they have to either copy code from the desired transition and use the Transition component from react-transition-group, or wrap the transition in a local <ThemeProvider/> and override the default easing on the theme.

I think neither of those options is good, and doing the solution with the style prop should only require changes in https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/transitions/utils.js


Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.


Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.


Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.


Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.


Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.