Email or username:

Password:

Forgot your password?
Top-level
Bramus

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?

6 comments
Bramus

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()

Bramus

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.

Bramus

O yeah, here’s the (totally not fancy) demo that was used for this recording.

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.

Brecht

@bramus Interesting... I do notice a flash of the text from time to time Canary, but then again, it's experimental I guess :)

Bramus

(Note that border-radius is not part of this new capture mode … yet 😉)

Go Up