How to change the default anim to something less cartoonish

[Johnrobmiller]

How to change the default anim to something less cartoonish

[vpodk]

I believe this "cartoonish" animation was definitely "critiqued" by the designers and then well documented on the Google Material Design website. As you can see in the index.css file, almost all sizing and animation properties have references to where these settings were taken from:

  /*
    * Exits and closing:
    * A navigation drawer opens over 250ms but closes over 200ms.
    * @see https://material.io/design/motion/speed.html#duration
    *
    * Accelerated easing:
    * Elements exiting a screen use accelerated easing, a transition in which 
    * the element starts at rest and ends at peak velocity.
    * @see https://material.io/design/motion/speed.html#easing
    *
    * Decelerated easing:
    * Incoming elements are animated using decelerated easing, in which 
    * transitions begin at peak velocity (the fastest point in an element's 
    * movement) and end at rest.
    * @see https://material.io/design/motion/speed.html#easing
    *
    * Scrim color opacity: 32% (1 - 0.32 = 0.68)
    * @see https://material.io/components/navigation-drawer#theming
    */

Answering to your question how to change the default animation, use plain css with the same class names and css selectors, just like you would change other third party components in your application. In this particular case, you need to override the following property:

.HamburgerDrawer .HamburgerDrawer-panel {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), visibility 1s linear;
}

Hope this helps.