Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: add ability fade controls in/out #235

Open
tzbarkan opened this issue Dec 12, 2023 · 0 comments
Open

Feature request: add ability fade controls in/out #235

tzbarkan opened this issue Dec 12, 2023 · 0 comments

Comments

@tzbarkan
Copy link

tzbarkan commented Dec 12, 2023

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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant