View transitions

Animate swaps with the View Transitions API – a free crossfade, or shared-element morphs.

Add data-transitions to animate swaps with the View Transitions API.

Opt inhtml

<script src="sparke.min.js" defer data-transitions></script>

Every swap gets a crossfade for free. Give elements a matching view-transition-name in CSS to morph them between pages:

Shared-element morphcss

.hero-image {
  view-transition-name: hero;
}

It's feature-detected and respects prefers-reduced-motion. Browsers without the API simply get an instant swap – no animation, no error.

It's a single opt-in attribute, so you can try it on your own site and remove it just as easily if you prefer instant cuts.