Tag Archives: view transitions

View Transitions: Use the new attr() or match-element for the view-transition-name?

At CSS Day, “YouTube guy” Kevin Powell showed a lot of demos that relied on the advanced attr() function. In one of the examples he used attr() to set view-transition-name values — a technique I covered in my article on advanced attr() function.

But then during the Q&A, Cyd Stumpel wondered if he couldn’t just use match-element there.

The short answer to that question is yes. The longer answer is … It Depends™

Read Post →

Introducing view-transitions-toolkit, a collection of utility functions to more easily work with View Transitions.

In my work with View Transitions over the last several years, I’ve published everything from deep-dive articles, demos, and announcement videos at Google I/O. I’ve also done some more experimental things with it, such as optimizing the keyframes or driving a View Transition by scroll.

To turn the lessons from these scattered experiments into something more reusable for both you and me, I’ve bundled the most frequent code patterns into a dedicated package: view-transitions-toolkit.

Read Post →

Introducing view-transitions-mock: A non-visual Polyfill for Same-Document View Transitions

View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.

view-transitions-mock bridges that gap. It is a spec-compliant JavaScript implementation of Same-Document View Transitions that polyfills the entire JavaScript API surface of the spec, but that doesn’t do the animation bits.

Read Post →

Faking Two-Phase View Transitions with the Navigation API’s precommitHandler

By using two sequential View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase View Transition today!

Read Post →