jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free View Transition Builder

Create smooth animated transitions between page states using the View Transitions API. Generate same-document (SPA) JavaScript snippets with document.startViewTransition() and cross-document (MPA) meta tags. Customize animation duration, easing, and view-transition-name for specific elements. Includes prefers-reduced-motion accessibility fallback.

Loading tool...

What is View Transition Builder?

The View Transitions API creates smooth animated transitions when navigating between pages or updating page content. The browser captures screenshots of the old and new states, then crossfades between them. You can assign view-transition-name to specific elements to animate them independently during the transition. For same-document transitions (SPAs), use document.startViewTransition(). For cross-document (MPAs), add a meta tag.

quickAnswer

Use the View Transitions API for smooth page and element animations. For SPAs: document.startViewTransition(() => updateDOM()). For MPAs: add <meta name="view-transition" content="same-origin"> to the head. Assign view-transition-name to elements for independent animation. Always respect prefers-reduced-motion.

limitations

  • Cross-document (MPA) transitions only work between same-origin pages. Cross-origin navigation does not trigger a view transition, even with the meta tag.
  • The browser captures static screenshots of the old and new states. Live content like videos, animations, or continuously updating elements may appear frozen during the transition.
  • View Transitions are Baseline 2025: Chrome 111+, Edge 111+, Safari 18.2+. Firefox support is in development. Unsupported browsers navigate without animation — the feature degrades gracefully.

How to use this tool

  1. Choose the transition type: same-document (for SPA content updates) or cross-document (for MPA page navigation).
  2. Set animation duration, easing, and the view-transition-name for elements that should animate independently.
  3. Optionally customize the ::view-transition-new and ::view-transition-old pseudo-elements.
  4. Copy the CSS and JavaScript/meta tag. Enable prefers-reduced-motion fallback for accessibility.

What you can use it for

  • Animate a hero image between a list page and a detail page using the same view-transition-name on both pages.
  • Add a smooth crossfade when navigating between pages in a static site by adding the view-transition meta tag.
  • Animate a gallery filter: call startViewTransition() before updating the image grid for a smooth layout change.

Use cases

Practical examples

example

Hero image morph between pages

A blog has a hero image on the list page and a larger version on the article page. Give both images the same view-transition-name: hero-image. The browser animates the image from its list position to the article position during navigation.

example

SPA content swap

A dashboard filters a data table. Wrap the filter update in document.startViewTransition(() => updateTable()). The old table rows fade out while new rows fade in — no manual animation code needed.

Common mistakes

  • Giving two elements the same view-transition-name on the same page — names must be unique per page. The browser throws an error and skips the transition.
  • Forgetting the meta tag in the page head for MPA transitions — cross-document transitions do not work without it.
  • Not handling prefers-reduced-motion — users with motion sensitivity should get instant transitions instead of animations.

verification

  1. Test the transition by navigating between pages or triggering the content update and observing the animation.
  2. Verify that prefers-reduced-motion: reduce disables the transition and shows an instant content swap.

FAQ

Questions about View Transition Builder

Can I animate specific elements instead of the whole page?

Yes. Assign view-transition-name to individual elements (like .hero img or .card). Each named element gets its own ::view-transition-old() and ::view-transition-new() pseudo-elements that you can animate independently. Elements without a view-transition-name participate in the root crossfade.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool