--- title: No boring transitions in your LiveView app | daily.dev description: A screencast walks through implementing the browser's View Transition API inside a Phoenix LiveView application, showing how to set up smooth page transitions... canonical: https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: No boring transitions in your LiveView app | daily.dev og:description: A screencast walks through implementing the browser's View Transition API inside a Phoenix LiveView application, showing how to set up smooth page transitions... og:url: https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r og:image: https://api.daily.dev/og/posts/SqBUD6k6r.png og:image:alt: No boring transitions in your LiveView app og:image:width: 1200 og:image:height: 630 og:locale: 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 - [View Transition API](https://daily.dev/posts/view-transition-api-zuarjkp3r) · Brad Woods' Digital Garden · 44 upvotes · 1 comments - [Some practical examples of view transitions to elevate your UI](https://daily.dev/posts/some-practical-examples-of-view-transitions-to-elevate-your-ui-v6naxyfac) · Piccalilli · 3 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"No boring transitions in your LiveView app","url":"https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r"},"datePublished":"2026-08-18T13:35:02.969Z","dateModified":"2026-08-18T14:46:33.132Z","description":"A screencast walks through implementing the browser's View Transition API inside a Phoenix LiveView application, showing how to set up smooth page transitions...","image":"https://media.daily.dev/image/upload/s--HRgLpUt6--/f_auto/v1722860399/public/Placeholder%2003","thumbnailUrl":"https://media.daily.dev/image/upload/s--HRgLpUt6--/f_auto/v1722860399/public/Placeholder%2003","isAccessibleForFree":true,"articleSection":"Elixir Forum","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Elixir Forum","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/c7c05785a0da4507bf9ae120a7e487e6","url":"https://daily.dev/sources/elixirforum"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,elixir,liveview","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Elixir Forum","item":"https://daily.dev/sources/elixirforum"},{"@type":"ListItem","position":3,"name":"No boring transitions in your LiveView app"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/no-boring-transitions-in-your-liveview-app-sqbud6k6r#faq","mainEntity":[{"@type":"Question","name":"How can I add smooth page transitions to a Phoenix LiveView app using the View Transition API?","acceptedAnswer":{"@type":"Answer","text":"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."}}]} ```