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?
Top-level
But what if we solved that? So that you’d get the following instead: - The clip-path on the circle transitions That’s much better, right? 6 comments
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. |
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()