Skip to content

Conversation

42tte
Copy link

@42tte 42tte commented Mar 29, 2025

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

@42tte 42tte force-pushed the 42tte/feat-remove-view-transitions branch from 175c69a to 54bab3f Compare March 29, 2025 12:11
@42tte
Copy link
Author

42tte commented May 9, 2025

@romainmenke
Copy link
Member

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 :)

@meduzen
Copy link

meduzen commented Aug 14, 2025

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;
  }
}

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

Successfully merging this pull request may close these issues.

3 participants