Snappy Page Transitions

Broadly speaking there are three things that are present in SPAs but not in Vanilla Web Apps, that lead to the latter feeling clunky and the former feeling smooth - when users click on a link or submit a form.

  1. Flash Of White: Non SPA users see a temporary blank white screen while the request loads.

  2. No Partial Page Replacement: Non SPA users the entire page is deleted, then replaced, which has various UX implications including causing the user to lose their scroll position.

  3. Delayed Feedback: Non SPA users don't see any immediate indication that their click was received, or form submission was sent, until the new page loads in.

    1. On the clicked element

    2. On the target area

Approaches

Chrome Paint Holding
View Transitions
External Libary
Triptych

Flash of white

✅ Chrome users today won't see a flash of white if the new page loads within 500 milliseconds, but this isn't a platform-level feature

✅ View Transitions will solve the flash of white issue even for browsers without paint holding.

HTMX, Turbo, Unpoly, Datastar and several others support this

✅ A set of proposals by Carson Gross and Alex Petros will address this.

Instant Feedback

❌ When a user clicks a link or submits a form, nothing will happen until the new page loads in.

❌ Even with multi document view transitions, we still have to wait for the new document before starting the transition animation

HTMX, Turbo, Unpoly, Datastar and several others support this

✅ A set of proposals by Carson Gross and Alex Petros will address this.

Partial Page Replacement

❌ We can't tell the browser to only

✅ This is possible, but without instant feedback still feels slow.

HTMX, Turbo, Unpoly, Datastar and several others support this

✅ A set of proposals by Carson Gross and Alex Petros will address this.

Periods

2025

  • HTML: Yes

  • CSS: Yes

  • JS: No

  • Build Step: No

Last updated