Transitions way too slow about material-ui-image HOT 5 CLOSED

In the old docs they stated the following

https://material.io/archive/guidelines/patterns/loading-images.html

But we can and should adapt to the new guidelines anyways

from material-ui-image.

Maybe something like transitionDuration={{ brightness: 2500, saturation: 3000, opacity: 2000 }} for ultimate customization or maybe just duration={200} and then we scale the other values?

from material-ui-image.

I just realized that our animation had incorrect timings (i.e. didn't match the graphs above) for as long as this component existed. 🤦‍♂️

Fixed that and added a animationDuration property to customize the animation duration (in milliseconds).

from material-ui-image.

Sorry for the late reply. The fadeIn transition is exactly as google intended it to be. But you can just override the transition via the imageStyle prop.
The default value is

transition: 'filterBrightness 2.5s cubic-bezier(0.4, 0.0, 0.2, 1), filterSaturate 3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 2s cubic-bezier(0.4, 0.0, 0.2, 1)'

Note that there are three different animations with three different durations.
Do you have a better idea on how we can expose this to make it more custom? I'm not a big fan of exposing three different props for each transition type

from material-ui-image.

not sure where Google intended the motion speed to be 2.5 - 3s long but the speed specs suggest otherwise https://material.io/design/motion/speed.html

from material-ui-image.