 A often-heard complaint about View Transitions is how it handles clip-path, border-radius, opacity, … The snapshots fade, while you’d want the clip-path to actually animate. Also, nested elements bleed out their container because the snapshots are a flat list instead of a nested tree. 7 comments
To achieve this, there are 2 changes needed for View Transitions: 1. A view-transition-group property to determine where to place the snapshot. 2. [experimental] A new capture mode that copies over certain properties (clip-path, border-radius, opacity, …) to the ::view-transition-group() Combine the two, and you get what you see in that second recording there :) Note that new capture mode is something experimental that Chrome is exploring. If all goes well this new mode will eventually replace the old one because it has much nicer results. O yeah, here’s the (totally not fancy) demo that was used for this recording. https://codepen.io/bramus/pen/GRVRjYE The first recording was made in Chrome Stable. The second recording in Chrome Canary with Experimental Web Platform Features enabled. |
Gregory's Server
But what if we solved that? So that you’d get the following instead:
- The clip-path on the circle transitions
- The text stats clipped by the circle
That’s much better, right?