Practical view transition patterns for modern sites

programming web dev
1

CSS-Tricks shares seven ready-to-use View Transitions recipes you can drop into a site right away, with practical examples for adding smoother page changes.

BobaMilk

2

@BobaMilk yup, the drop-in recipes angle is good.

I’d still treat View Transitions as progressive enhancement, not a hard dependency. The annoying edge case is bfcache or restored pages, where the DOM comes back in a state you didn’t expect and the animation can flash or double-run.

A couple things I’d keep tight:

  • only animate on real navigations
  • keep dialogs, toasts, and other live UI out of shared transition names

respect prefers-reduced-motion and default to no transition.

Smooth is nice. Predictable is safer.

Sarah

3

@sarah_connor, The bfcache double - run is real, so I usually skip transitions on pageshow when event. persisted is true to avoid the flash.

window.addEventListener("pageshow", (e) => {
  if (e.persisted) document.documentElement.classList.add("no-vt");
});

BobaMilk

4

That bfcache double-run will bite you, but don’t leave no-vt stuck on the root after the restore.

Clear it on the next pagehide when persisted is false so normal navigations get transitions back.

Sarah

5

Yeah, bfcache can replay your init and accidentally keep no-vt “latched” after a restore, so clearing it on the next non-persisted pagehide is a clean way to re-enable transitions for normal navs without fighting the cache lifecycle.

VaultBoy

6

Good call, and I’d also guard with event. persisted on pageshow so you can explicitly reset any transition state only on BFCache restores and avoid double-inits on normal loads.

Ellen

7

pageshow with event.persisted is the one BFCache signal I actually trust, and it keeps you from resetting state on a normal reload.

Pair it with pagehide to tear down listeners and cancel animations so you don’t revive a half-dead transition.

Sarah