{"id":113,"date":"2026-03-05T02:22:26","date_gmt":"2026-03-05T02:22:26","guid":{"rendered":"https:\/\/luca05.co.uk\/article\/?p=113"},"modified":"2026-03-25T15:58:30","modified_gmt":"2026-03-25T15:58:30","slug":"view-transitions","status":"publish","type":"post","link":"https:\/\/luca05.co.uk\/article\/view-transitions\/","title":{"rendered":"View Transitions: The Future of Web Animation is Here"},"content":{"rendered":"\n

How a new browser feature is making smooth animations accessible to everyone<\/mark><\/strong><\/p>\n\n\n\n

\n\n\n\n

If you’ve ever visited a modern website and noticed how smoothly photos expand when you click on them, or how elegantly content slides into view, you’ve experienced the magic of web animations. Until recently, creating these polished effects required complicated code and specialist knowledge. But that’s all changing with the View Transition API.<\/p>\n\n\n\n

What Are View Transitions?<\/h2>\n\n\n\n

Imagine you’re browsing a photo gallery on a website. You see a grid of small thumbnails and click on one. Instead of the page suddenly jumping to show a larger version, the photo smoothly grows from its small size to fill the screen. That smooth, fluid movement is a view transition.<\/p>\n\n\n\n

In technical terms, the View Transition API provides a mechanism for easily creating animated transitions between different website views. But really, it’s about making websites feel more natural and polished\u2014like watching a film rather than flipping through still photographs.<\/p>\n\n\n\n

How It Actually Works<\/h2>\n\n\n\n

The browser does the heavy lifting through a four-step process:<\/p>\n\n\n\n

Step 1: Capture<\/strong>
When someone triggers an action\u2014clicking a button, navigating, or filtering a list\u2014the browser takes a snapshot of the current view. Think of it as taking a photograph of the webpage, recording where every element sits on the page.<\/p>\n\n\n\n

Step 2: Update the DOM<\/strong>
Your JavaScript code runs and updates the webpage. Content changes, elements are added or removed, and the layout shifts. All of this happens in a single atomic update.<\/p>\n\n\n\n

Step 3: Snapshot Again<\/strong>
The browser captures the new view state. Now it has two snapshots: before and after. It can calculate exactly how much things have moved, grown, or shrunk.<\/p>\n\n\n\n

Step 4: Animate<\/strong>
Here’s where the magic happens. The browser creates smooth CSS animations that morph between the old and new states. Elements appear to move, scale, and fade\u2014all at 60 frames per second using your computer’s graphics processor. Then it tidies up the temporary elements it created.<\/p>\n\n\n\n

The brilliant part? All of this happens automatically. You don’t have to write complex animation code.<\/p>\n\n\n\n

Two Types for Different Needs<\/h2>\n\n\n\n

View Transitions come in two flavours, depending on how your website is built:<\/p>\n\n\n\n

Same-Document Transitions (SPAs)<\/mark><\/strong>
These work within a single page using the document.startViewTransition()<\/code> function. They’re perfect for filtering lists, switching tabs, expanding sections, or any content changes that happen without loading a new page.<\/p>\n\n\n\n

https:\/\/mdn.github.io\/dom-examples\/view-transitions\/spa<\/a><\/p>\n\n\n\n

Cross-Document Transitions (MPAs)<\/mark><\/strong>
These work automatically when you navigate between different pages. Both pages just need to opt in with a simple CSS rule, and the browser handles everything else.<\/p>\n\n\n\n

https:\/\/mdn.github.io\/dom-examples\/view-transitions\/mpa<\/a><\/p>\n\n\n\n

The Code Comparison That Says It All<\/h2>\n\n\n\n

Before View Transitions, creating smooth animations looked like this:<\/p>\n\n\n\n

async function updateList(filter) {\n  \/\/ Animate out old content\n  await animateOut();\n  \n  \/\/ Update DOM\n  filteredItems = items.filter(item => item.type === filter);\n  renderList(filteredItems);\n  \n  \/\/ Animate in new content\n  await animateIn();\n  \n  \/\/ Handle focus, accessibility, event listeners...\n}<\/code>\n<\/code><\/pre>\n\n\n\n
Dozens of lines of complex code, managing states, coordinating timing, handling edge cases.<\/p>\n\n\n\n
With View Transitions, it’s this simple:<\/p>\n\n\n\n
function updateList(filter) {\n  document.startViewTransition(() => {\n    filteredItems = items.filter(item => item.type === filter);\n    renderList(filteredItems);\n  });\n}\n<\/code><\/pre>\n\n\n\n
Three lines. That’s the entire difference. The browser handles all the animation logic.<\/p>\n\n\n\n
Why This Matters<\/h2>\n\n\n\n
1. Less Code to Write<\/strong>
You’re writing 3 lines instead of 50. This isn’t just about saving time\u2014it’s about being able to focus on your website’s actual functionality instead of wrestling with animation complexity.<\/p>\n\n\n\n
2. Websites Feel Better<\/strong>
Before View Transitions, many websites had no animations because it was too complicated. Now anyone can add smooth animations. This means regular websites\u2014not just those built by large companies\u2014will feel polished and professional.<\/p>\n\n\n\n
3. Works Everywhere<\/strong>
Previously, React websites used one animation tool, Vue websites used another, and vanilla JavaScript did something different. Now everyone can use View Transitions. It’s one standard tool that works across the entire web ecosystem.<\/p>\n\n\n\n
4. Web Apps Feel Like Phone Apps<\/strong>
This might be the most exciting change. Web applications have traditionally felt different from native phone apps\u2014less smooth and less polished. With View Transitions, web apps can be just as fluid as native applications. Users won’t feel the difference any more.<\/p>\n\n\n\n
Can You Use Them Now?<\/h2>\n\n\n\n
The short answer: yes, but with some caveats.<\/p>\n\n\n\n
Over 90% of modern browsers support View Transitions:<\/p>\n\n\n\n