All UI elements with interaction states have a Fade Duration and an Interactable state, in addition to the various other states like Hover, Selected, Disabled, etc. Some, if not all of those other states are applied over time using the Fade Duration. Interactable, however, is applied instantly.
I recently built a global lock state manager for my UI so that I can anonymously freeze the entire UI in response to things like network connection issues or modals being opened. The effect is applied mostly through CanvasGroup components sitting at the top of each window.
My problem is that the aesthetic design requires a smooth fade in and out for the UI, yet the interactable state disrupts this by snapping its visual changes instantly regardless of the Fade Duration. I could just leave interactable enabled and rely on the raycast blocking to functionally accomplish the same thing, but I’d really like to include all of the visual changes I’ve assigned as responses to that interactable state. I tend to darken and desaturate UI elements when their interactable state is disabled for example.
Is there any way to make the Interactable state apply its visual changes over time using the Fade duration?