View Transition Examples

This page references a series of view transition examples, starting with basic configurations and progressively incorporating more features. The tables below provide a brief description of what distinguishes each example and includes a link to the live example which also includes its code and a detailed explanation.

The View Transition API automatically applies two primary types of animations to your elements:

• Exit/Entry animations, which include an exit animation for the old image and an entry animation for the new image.
• Group (or Morph) animations, where the transition group animates changes in width, height, and position¹ from the old image to the new one.

By default, both types of animations occur simultaneously. However, they might not always be noticeable. For instance, if elements with the same view transition name have the same size and position before and after the transition, the group animation will result in no visible change. Similarly, if the old and new images are identical, only the group animation will be visible, while the exit/entry animations won’t produce noticeable effects.²

The first set of examples focuses on exit and entry animations for same-document view-transitions, animating a component directly on its page.

The second set of examples highlights exit and entry animations of cross-document view transitions. Those are triggered by following a link to a new page.

While the first two sets demonstrate exit and entry animations, the Image Morph Set introduces group animations, starting with image morphs, which tend to be easier compared to morphs involving text.

For morphing text with view transitions, we explore two additional sets: the Little Fail Set, which demonstrates various common failures, and the Improved Set, which attempts to address and enhance those issues.

Same-Document View Transition Examples

These examples focus on a tab component where you can switch between different content sections. When you click on the headers, the content in the main area of the tab changes, but the component itself remains in the same position. As a result, these examples demonstrate exit and entry animations of the content only.

Same-Document 'Tabs' Example

Dad Jokes

Punny Puns

Why don’t skeletons fight each other?
They don’t have the guts.

I’m reading a book on anti-gravity.
It’s impossible to put down!

This is not yet the example, click a link from the left column in the table blow.

Name	Description
Basic	Just the default cross-fade transition of the whole document
Custom Animation	With a custom animation that shrinks the old content to a line before revealing the new one
Multiple Transitions	This animates the content area and headers with two independent animations

Cross-Document View Transition Examples

These examples focus on a picture component where you navigate through individual pages, each displaying a different image. On every page, both the picture and the button that advances to the next page remain in the same position. While they move during the transition, these are purely exit and entry animations, with no morphing involved yet.

Cross-Document 'Picture' Example

This is not yet the example, click a link from the left column in the table blow.

Name	Description
Basic	Just the default cross-fade transition of the whole page
Custom Animation	With a custom animation that shrinks the current image to a point before revealing the next image
Multiple Transitions	Adds a second animation that slides the navigation button

Image Morph Examples

Morphing thumbnails into hero images is a classic use case for view transitions. Morphing animations share the characteristic that the position and/or size of elements with the same view transition name differ before and after the transition. The animation visually connects the two, showing that the small thumbnail serves as a placeholder for the larger image.

Thumbnail to Detail Morphs

This is not yet the example, click a link from the left column in the table blow.

Name	Description
Same aspect ratio	The default morph transition with same aspect-ratio images
Different aspect ratio	The default morph transition with images of different aspect-ratio
Clipped overflow	An alternative morph transition where images do not grow beyond the group outline
Covered object fit	A non-overflowing alternative for images with different aspect-ratio

More to come. Especially text morph animations.

Side note

Creating these example pages was a blast! They bring together a mix of Astro components, MDX partials, and endpoints. Best of all, with each example, you can simply hit Ctrl-U (or “view page source”) to explore readable source code, free from all the typical clutter! And yes, these are still static pages generated with SSG.

Footnotes

1. Here, position is used for simplicity. The group animation actually refers to both position and all applied CSS transformations, such as those defined by matrix3d or its specialized forms like rotate. ↩

2. The cross-fade effect is more intricate than it appears at first glance. It works so smoothly because the default animations also set the mix-blend-mode CSS property to plus-lighter↗ ↩