CSS variable --f-transition-duration to control transition duration

[gyurmey2]

Is your feature request related to a problem? Please describe.

Thank you for adding CSS variable --f-transition-duration. However, there are still classes to which the variable has not been added (e.g. .f-throwOutUp, .fancyboxcontainer.is-animated[aria-hidden=false] .fancyboxbackdrop and more). Any chance to add?

Describe the solution you'd like

Add a CSS variable wherever there is a transition duration.

Describe alternatives you've considered

No response

Additional context

No response

[fancyapps]

Hi, Thanks for the suggestion, here are the newly added CSS variables::

:root {
  --f-throw-out-duration: 0.15s;
  --f-throw-out-distance: 50px;

  --f-transition-duration: 0.35s;

  --f-interface-enter-duration: 0.35s;
  --f-backdrop-enter-duration: 0.35s;

  --f-interface-exit-duration: 0.35s;
  --f-backdrop-exit-duration: 0.35s;
}

https://jsfiddle.net/ytkug9eq/

[gyurmey2]

Hi, thank you very much for considering my request. However, I don't know why all the variables don't work? For example, I mean

:root {
  --f-interface-enter-duration: 0.35s;
  --f-backdrop-enter-duration: 0.35s;

  --f-interface-exit-duration: 0.35s;
  --f-backdrop-exit-duration: 0.35s;
}

https://jsfiddle.net/z9r8715k/

[fancyapps]

Well, too long animations are not reasonable, so they are capped to 0.35s. For example, if a modal is closed with a zoom animation, it would be weird if the background continued to fade (for almost 10s).

[gyurmey2]

I definitely agree with this, but I only set 10s for testing. Please note that in the motion reduction mode to 0s it also doesn't work.

[fancyapps]

Sorry, but I do not understand what is not working for you, everything is working as expected. Please, explain what you expected and what the actual result is.

If you want to disable all animation and transitions, then you can do it using JS, like this:

const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;

Fancybox.bind('[data-fancybox="gallery"]', {
  Images : {
    zoom: !isReduced
  },
  showClass: isReduced ? false : "f-zoomIn",
  hideClass: isReduced ? false : "f-fadeOut",
  Carousel: {
    transition: isReduced ? false : 'slide',
    friction : isReduced ? 0 : 0.12
  },
  Thumbs : {
    type: "classic",
    Carousel: {
      transition: isReduced ? false : 'slide',
      friction : isReduced ? 0 : 0.12
    }
  }
});     

https://jsfiddle.net/nph56b4s/

[gyurmey2]

I wanted to do exactly the same thing, but only with CSS. Many thanks for your help! 🙏