View Transition Generator
Animate between page states the modern way. Pick an effect, preview it live, copy the code.
The toggle swaps the preview between grid and list using document.startViewTransition, animated by the exact CSS this page generates for you.
Your Code
Page transitions without the animation plumbing
Native-feeling motion used to be the web's missing piece: apps glided between screens while websites jumped. The View Transitions API closes that gap with a snapshot trick. The browser photographs the current state, you change the DOM however you like, and it animates between the two photographs using ordinary CSS animations attached to ::view-transition-old and ::view-transition-new. Because you style pseudo-elements instead of orchestrating elements, one snippet restyles every state change on the page.
This generator produces the two halves you need: the effect CSS for the root transition, and the startViewTransition wrapper for your state change. Two upgrades build naturally on top of it: give individual elements a view-transition-name for shared-element morphs, and add @view-transition { navigation: auto; } to animate between full page loads on the same site.
How to use this generator
- Pick an effect and a duration. Shorter feels snappier; 250–400ms suits most UI state changes.
- Click Toggle Layout to watch the preview animate between grid and list with your settings.
- Copy the code: paste the CSS into your stylesheet and wrap your own DOM change in the JavaScript function.
- Respect reduced motion: the generated CSS includes a prefers-reduced-motion guard that disables the animation for users who ask for calm.
Frequently Asked Questions
What are view transitions?
The View Transitions API lets a page animate smoothly between two states or even two pages. The browser snapshots the old state, you change the DOM, and it cross-animates to the new state using CSS animations you control through the ::view-transition-old and ::view-transition-new pseudo-elements. One API call replaces hand-rolled FLIP animations and page-fade hacks.
Which browsers support view transitions?
Same-document view transitions (the kind this generator previews) ship in Chrome, Edge and Safari, with Firefox support following. Cross-document transitions, which animate between full page loads on the same site, are newer and Chromium-first. This page checks your browser live before running the preview.
Do view transitions work between different pages?
Yes, that is the cross-document mode: add @view-transition { navigation: auto; } to your CSS and same-origin page navigations animate automatically, styled by the same pseudo-elements this generator produces. The JavaScript wrapper differs (no startViewTransition call), but the effect CSS carries over.
How do I animate one specific element instead of the whole page?
Give the element a view-transition-name in CSS. The browser then lifts it into its own transition group and morphs it between its old and new position and size, which is how shared-element transitions (a thumbnail growing into a hero image) are built. Everything else falls back to the root transition.
Is anything uploaded while I use this generator?
No. The preview uses your browser's own View Transitions API and the code is generated locally in the tab.
Check Out Other Popular Tools
Deprecated Tags Checker
Scan any webpage for outdated or deprecated HTML5 tags that should be replaced.
French Days & Months
Interactive reference for French days of the week and months of the year. Features audio pronunciation, IPA phonetics, gender rules, prepositions, and date sentence builder.
Attendance Sheet Generator
Printable school and workshop register supporting Sunday–Thursday GCC weeks, Monday–Friday schedules, and CSV export.
Was this tool helpful?
Comments
Loading comments...