Struggling with the new view transitions API
Hi! I am exploring the View transitions API. I have a simple demo with just a box that changes background-color and width on click. Since I see some things I don't understand (the height also changes during animation) I wanted to try to debug/replay it in the browser dev tools.
EDIT: I kinda solved it, but I am struggling with the API itself. Please jump down to the latest reply
I open the Animations drawer, I click the box, I record the animation, I see it right there. But I cannot figure out how to "replay it". When I click play, change speed, or draw manually, nothing happens in the main browser window. I don't understand. What do I have to do to actually see the animation being replayed.
Anyone else here exploring the the animations dev tools, who could explain how to use it?
3 Replies
Okey, now I'm starting to understand the problem. I am able to do what I want for normal transitions. But for the ::view-transitions I am not able to replay it.
Gah I am so annoyed. Web Animations API is praised, but I am not able to do a simple thing like this:
1. Change background color smoothly (CHECK!)
2. Change width (NO!)
The animation "jumps" and the boxes are twice as high during the animation since they stack
Specifying a height solved it, but I don't reaally understand why and how this cannot be mentioned anywhere. The docs really need more basic examples and pitfalls...