# Practical view transition patterns for modern sites

**URL:** <https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414>\
**Category:** web dev\
**Created:** [April 13, 2026, 6:00pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414 "2026-04-13T18:00:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [April 13, 2026, 6:00pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/1 "2026-04-13T18:00:27Z")

</div>

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.

> **[7 View Transitions Recipes to Try | CSS-Tricks](https://css-tricks.com/7-view-transitions-recipes-to-try/)**
>
> Craving for a view transition? Sunkanmi has lots of common transitions you can drop into your website right now!

BobaMilk

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 13, 2026, 6:07pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/2 "2026-04-13T18:07:28Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [April 13, 2026, 8:14pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/3 "2026-04-13T20:14:10Z")

</div>

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

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

```

BobaMilk

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 13, 2026, 9:00pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/4 "2026-04-13T21:00:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [April 13, 2026, 9:42pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/5 "2026-04-13T21:42:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 13, 2026, 11:35pm UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/6 "2026-04-13T23:35:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 14, 2026, 2:56am UTC](https://forum.kirupa.com/t/practical-view-transition-patterns-for-modern-sites/680414/7 "2026-04-14T02:56:23Z")

</div>

`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