Re: [w3ctag/design-reviews] View Transitions API (Issue #748)

> Is the current experimental implementation in Chrome up to date with the current syntax?

Yes. Canary is up to date, the last syntax changes landed in 109.0.5410.0.

> Do you have feedback from authors that have used the experimental implementation? Have you observed any of them using it and seen what they struggle with?

Feedback from authors has been quite positive since the pseudo-DOM structure can be animated using existing APIs and debugged via existing devtools support. A few interesting patterns which have come up from experimentation are:

- Avoiding a long delay when rendering is paused, waiting for the new DOM to load. They'd like some animation to give the user feedback that content is loading.
   - This delay is in author's control since it depends on how long the updateDOM callback takes. So we've seen authors do most of the latency sensitive work (network fetches) before triggering the transition. This allows the page to remain interactive. Authors can also add a spinner (or another animation) before the transition to give loading feedback. 
   - Another (more common) strategy is taking the user to a skeleton page which suffices for the basic transition and then lazily loading large assets like images.

- Keeping an element continuously animating throughout the transition, in particular a video. Again if the author callback is fast then the duration the video doesn't update is limited to how long the browser takes to snapshot which is 2-3 frames long and not noticeable. @jakearchibald made a [demo](https://simple-set-demos.glitch.me/video/) which shows this (works in current chrome canary with chrome://flags/#view-transition enabled).

We had a breakout session describing how the feature works at BlinkOn today. I'll post a link of the recording which would hopefully help with understanding the full design.

Will let @jakearchibald comment on the ergonomics of the callback based API.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/748#issuecomment-1317800284
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/748/1317800284@github.com>