View transitions for form interactions

Recently, Jim Nielsen has been playing with simplifying interactions with HTML and view transitions. This made me think about doing this after <form> submissions as well. How would this work?

To test this out, I've just added a simple Ask me anything sort of guestbook (why isn't this a slash page?), which works like this now, without any JavaScript:

It's a real quick prototype, using the view transition default animations for now. I've added some data attributes to my HTML, since I want to keep my selectors simple, I don't want to have to change CSS each time I'm coming up with a new interaction, and I want to stitch this together with HTML:

<input type="text" name="name" data-vt="question-name">

…

<textarea name="question" data-vt="question-text"></textarea>

And in the response page, which adds the question to the database, does some session stuff, hides the comment form for just that view, and adds these data attributes dynamically to the question you just asked:

<article>
	<p data-vt="question-text">{{ question }}</p>
	<footer data-vt="question-name">{{ name }}</footer>
</article>

Combined with this bit of CSS, which uses the attr() function and type parameter:

@media (prefers-reduced-motion: no-preference) {
	[data-vt] {
		view-transition-name: attr(data-vt type(<custom-ident>));
	}
}

At the time of writing this, this only works in Chromium based browsers. Firefox doesn't support @view-transition and both Safari and Firefox don't support advanced attr() yet. Firefox is working on it and Safari has it in their Technology Preview. Both advanced attr() and @view-transition are part of Interop 2026.

Still playing with doing the same on the comment form below, but it's more complicated there, since the resulting page redirects and automatically smooth-scrolls to the #comment you just added. Removed smooth scrolling, so it should work here now as well. Since people are trying it out anyway..

Jim is definitely onto something!