Feature request: add ability fade controls in/out

[tzbarkan]

With any version of lottie-player we have used up to the current 2.0.2, controls are either on or off.

We would like to fade the controls in on :hover, :focus, and :focus-within and then back out.

Currently, the only way we see to do this without pushing code into the shadow dom is to define the control colors as transparent, and then change them on hover and focus:

lottie-player {
    --lottie-player-seeker-track-color: transparent;
    --lottie-player-toolbar-icon-active-color: transparent;
    --lottie-player-toolbar-icon-color: transparent;
    --lottie-player-toolbar-icon-hover-color: transparent;
    --lottie-player-seeker-thumb-color: transparent;

    &:hover, &:focus-within {
        --lottie-player-seeker-track-color: #ccc;
        --lottie-player-toolbar-icon-active-color: blue;
        --lottie-player-toolbar-icon-color: red;
        --lottie-player-toolbar-icon-hover-color: green;
        --lottie-player-seeker-thumb-color: orange;
    }
}

But this is suboptimal because it just blinks in or out. Doing it this way is difficult to make into a smooth transition cross-browser, potentially requiring keyframe animations based on being able to define the opacity as a number using the css property at-rule.

So, we have been pushing a simple hover transition from opacity 0 to 1 and back via JS. But it would be nice not to hack at your code to do this smoothly, ex:

const REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const SHADOW_STYLE = document.createElement('style');

SHADOW_STYLE.innerHTML = `
    #lottie-controls {
        opacity: 0;
        transition: opacity 200ms;
    }

    :hover #lottie-controls, :focus-within #lottie-controls {
        opacity: 1;
    }
`;
if (!REDUCED_MOTION) {
  lottieElm.shadowRoot?.append(SHADOW_STYLE);
}