No boring transitions in your LiveView app
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A screencast walks through implementing the browser's View Transition API inside a Phoenix LiveView application, showing how to set up smooth page transitions instead of jarring instant swaps. It builds on ideas from an earlier community thread and a phoenix_live_view pull request that added navigation guards to liveSocket, which enabled the examples shown.
Questions this post answers
How can I add smooth page transitions to a Phoenix LiveView app using the View Transition API?
Smooth transitions in LiveView can be achieved by hooking into the browser's View Transition API alongside LiveView's navigation lifecycle. A screencast demonstrates the setup end to end, building on navigation guards added to liveSocket in a phoenix_live_view pull request that expose hooks for wrapping DOM updates in view transitions instead of instant swaps. Developers polishing LiveView navigation can find setup walkthroughs like this one on daily.dev.