sanitize.css icon indicating copy to clipboard operation
sanitize.css copied to clipboard

feat(reduce-motion): remove view-transition

Open 42tte opened this issue 10 months ago • 3 comments

The new @view-transition API is supported by most mayor browsers and allows for page transition animations. Disabled these on prefers-reduced-motion.

42tte avatar Mar 29 '25 10:03 42tte

@romainmenke @jonathantneal

42tte avatar May 09 '25 10:05 42tte

Seems fair.

I don't think the original premise of these is correct. "reduce motion" does not imply that all transitions/animations should be disabled. Only that potentially harmful/detrimental motion should be reduced.

But I also think that is beyond the scope of this change. Since this CSS preset already has this opinion it seems fine to continue along the same line.


It's been 4 years since anyone published this package. So I'd like to first see if there are any blockers for publishing. I want to avoid merging a change that can never be published :)

romainmenke avatar May 09 '25 10:05 romainmenke

Taking the opportunity of this PR to suggest another change that might also inspire this one: the current 0s for durations is preventing transition and animation start/end events to be fired.

I've created a pen to demo this back in the days.

If you want to keep a hard reset, this is the minimal code to avoid breaking JS code relying on these event:

*,
::before,
::after {
  @media (--reduced-motion) {
    transition: .001s !important;
    animation: .001s !important;
  }
}

Back to view transitions: I don’t know how the pageswap and pagereveal events behave in this situation, but the decision for this should probably be consistent with the adoption of my suggestion. Maybe the view transition duration should also be a .001s one. I haven’t touched VTs a lot, but I guess that would be the code:

:root::view-transition-old(*),
:root::view-transition-new(*),
:root::view-transition-group(*),
:root::view-transition-image-pair(*) {
  @media (--reduced-motion) {
    animation: .001s !important;
  }
}

meduzen avatar Aug 14 '25 11:08 meduzen