--- title: "No boring transitions in your LiveView app" url: https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r source_url: https://forum.elixirforum.com/t/view-transition-api-no-boring-transitions-in-your-liveview-app/76395 type: article source: "Elixir Forum" published: 2026-08-18T13:35:02.969Z updated: 2026-08-18T14:46:33.132Z tags: ["webdev", "elixir", "liveview"] reading_time: 1 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # No boring transitions in your LiveView app **[Elixir Forum](https://daily.dev/sources/elixirforum)** · 1 min read · 0 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## 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._ ## Similar posts on daily.dev - [A beginner-friendly guide to view transitions in CSS](https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv) · MDN Blog · 4 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#elixir](https://daily.dev/tags/elixir), [#liveview](https://daily.dev/tags/liveview) [View this post on daily.dev](https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r)