Search modal view transitions #1831
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/utils/startViewTransition.js
Outdated
Comment on lines
5
to
16
| const motionSafe = | ||
| typeof window !== 'undefined' | ||
| ? window.matchMedia('(prefers-reduced-motion: no-preference)') | ||
| : undefined | ||
|
|
||
| export function startViewTransition(cb) { | ||
| if (motionSafe?.matches && typeof document?.startViewTransition === 'function') { | ||
| document.startViewTransition(() => { | ||
| flushSync(cb) | ||
| }) | ||
| } else cb() | ||
| } |
There was a problem hiding this comment.
Will this prevent the transition from animating when prefers-reduced-motion is active, which will trigger the current non-animated behavior?
barvian
force-pushed
the
search-transitions
branch
from
aa4af88
to
ac92181
Compare
barvian
force-pushed
the
search-transitions
branch
from
7ffbf14
to
9fb27fa
Compare
barvian
force-pushed
the
search-transitions
branch
from
83ba838
to
b7f6caf
Compare
This reverts part of commit b7f6caf.
barvian
force-pushed
the
search-transitions
branch
from
af7a12f
to
072aa88
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have no idea if the team is interested in something like this, but I figured I'd propose it 🙂
Live demo: tailwind-search.barvian.me (the Vercel previews are choppy for me; I think it's the dev toolbar)
search.mp4
I've always thought the search bars on the site would look great if they smoothly transitioned to the modal. The View Transitions API makes this trivial to implement while gracefully falling back to existing behavior if the browser doesn't support it or if the user prefers reduced motion. Plus, there's no lag because the modal is fully active while it's transitioning, so you can start typing immediately without waiting for the animation to end. I used a
linear()spring transition with a perceptual duration of250msto keep things feeling snappy. I made sure to support the small-screen version too:sm-search.mp4
The only noticeable difference from prod for browsers that support View Transitions is shown above 👆🏻: the "Quick search..." button on the homepage disappears whenever the search icon in the header is visible (on prod both are visible between
smandmdbreakpoints). This dramatically simplifies the view transition logic. Like everything else, though, it only applies if the user's browser supports view transitions and is "motion-safe".It even works with route transitions:
route-transitions.mp4
I'm curious to hear your thoughts, if any!