Problem / Motivation
Smoothly transitioning between different views or routes in React typically requires heavy routing animation libraries. The modern web platform recently introduced the native document.startViewTransition() API, which allows the browser to take a screenshot of the old DOM and smoothly morph it into the new DOM.
Proposed Solution
Build a lightweight React hook (useViewTransition) that wraps state updates in the native View Transitions API, injecting EaseMotion's timing and easing variables to control the morph duration.
Implementation Details
As per the strict contribution guidelines, I will isolate this in the React track:
- Create
submissions/react/ease-view-transition-viidhii19/.
- Build
useViewTransition.jsx. It will export a function that takes an update callback (e.g., a React state setter). If the browser supports startViewTransition, it yields to the API; otherwise, it degrades gracefully to standard rendering.
- Build
style.css defining the ::view-transition-old and ::view-transition-new pseudo-elements, mapping their durations directly to EaseMotion CSS variables like var(--ease-speed-medium).
- Provide
demo.html showing a list view seamlessly morphing into a detail view without external routing libraries.
Track
React Integration (submissions/react/)
Would you like to work on this?
Problem / Motivation
Smoothly transitioning between different views or routes in React typically requires heavy routing animation libraries. The modern web platform recently introduced the native
document.startViewTransition()API, which allows the browser to take a screenshot of the old DOM and smoothly morph it into the new DOM.Proposed Solution
Build a lightweight React hook (
useViewTransition) that wraps state updates in the native View Transitions API, injecting EaseMotion's timing and easing variables to control the morph duration.Implementation Details
As per the strict contribution guidelines, I will isolate this in the React track:
submissions/react/ease-view-transition-viidhii19/.useViewTransition.jsx. It will export a function that takes an update callback (e.g., a React state setter). If the browser supportsstartViewTransition, it yields to the API; otherwise, it degrades gracefully to standard rendering.style.cssdefining the::view-transition-oldand::view-transition-newpseudo-elements, mapping their durations directly to EaseMotion CSS variables likevar(--ease-speed-medium).demo.htmlshowing a list view seamlessly morphing into a detail view without external routing libraries.Track
React Integration (
submissions/react/)Would you like to work on this?