Video: Bramus Van Damme – Supercharge Web UX with View Transitions

Bramus Van Damme pitched me a talk. A clean, thorough introduction to View Transitions. All the ins and outs. And then, by his own account, he looked up what “beyond tellerrand” actually means. To look beyond the edge of your plate. At which point he decided the talk he had pitched did not, in fact, look over any edges at all and threw it out.

What he brought instead was the same starting point cranked up to eleven. Or, as the conference hotel apparently preferred to put it: View Transitions on fire (you are going to find out what that means).

He opened with a confession and a callback: something about a man in a lab coat last seen running off with a smoking oscilloscope and if you see him, grab him. (Niels, we are all still watching you.) Then he introduced himself properly: Chrome DevRel, member of the CSS Working Group, scuba diver, vinyl collector with a soft spot for classic house. And a blogger of 25 years standing. The blog, he noted, is the thing that eventually landed him the job at Google. His advice to anyone still hesitating: start one. Share what you know.

"Supercharge Web UX with View Transitions" begins as the talk he originally promised. View Transitions let you animate between two states of a page. Three items in a list becoming four, a thumbnail growing into a full detail view, a video that keeps playing as the layout rearranges around it. Bramus walks through the whole model with real clarity: identify and name the elements you want to transition, trigger the transition and then, optionally, customise the animations. Underneath, the browser snapshots the old and new states, builds a little tree of pseudo-elements and cross-fades and moves them for you. It is, as he keeps reminding the room, just CSS. You already know how to change it.

Taking Maxi Ferreira’s well-known demo as a starting point, Bramus tries to make a transition run not on a timer but on interaction. First he attempts to make it draggable, borrowing Jake Archibald’s Pointer Events approach and runs straight into a wall. Drag fights with scroll. Touch devices rebel. He tries touch-action: none, then more JavaScript to fake the scrolling back, and watches momentum and fling gestures fall apart. It is a genuinely honest stretch of talk: a smart person showing you the dead ends, not just the polished result. The breakthrough is a reframe. He had been asking “how do I make this draggable?” when the real question was “how do I make this scroll-driven?” Cue one very happy scroll-driven View Transition.

Out of all that repeated boilerplate – start a transition, wait for it to be ready, grab the animations, do something clever – came a package. Bramus used the talk to introduce view-transitions-toolkit, a set of utility functions that fold the gnarly code he kept rewriting into single, reusable calls.

The rest of the talk is essentially a tour of the hard parts, each one with a fix and most of them now a one-liner in the toolkit: janky width/height animations solved by rolling your own FLIP so things run on the compositor. The whole document locking up, solved by element-scoped View Transitions (shipped in Chrome 147, and he is refreshingly direct about wanting other browsers to follow … be vocal, fill in State of CSS). Cross-fading pixels where you wanted a border-radius to actually grow, solved with a foreground/background split and a plain CSS transition (thank you, Martin Trapp). Rage-clicking that snaps mid-flight animations to the end, smoothed out with an accumulate trick (thank you, Kevin); and snapshots bleeding out of their containers, solved with nested groups or for free, if you use element-scoped transitions.

The finale is the best kind of punchline. After all that cutting-edge work, Bramus reminds everyone that Internet Explorer did it first. IE had “Interpage Transitions”. PowerPoint-style page reveals driven by a meta tag, 23 effects, number 23 being “surprise me.” So naturally he wrote a library that brings them back to modern browsers, meta tags and all. It works in Firefox. It works, he notes, in Internet Explorer 5.5.

I love the shape of Bramus’ talk. It starts where a conference talk is supposed to start: a clear, generous explanation of a powerful new platform feature and then refuses to stop there. It goes looking for the edge on purpose, shows you the failures along the way, and comes back with both a real tool and a grin. That is about as beyond tellerrand as a talk about a CSS specification can get. ;)

Now go and build something crazy with it.

More information about Bramus Van Damme on his beyond tellerrand speaker profile page.

---