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!
Last updated: First published:
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.
You should be familiar with the default animations inserted by the View Transition API.
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/morph animations, starting with image morphs, which tend to be easier compared to morphs involving text.
For morphing text with view transitions, we investigate two additional sets: the Strange Artifacts Set, which identifies several common pitfalls, and the Improved Set, which attempts to fix and improve these 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.
| 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
| 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
| 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 |
| Surprising fade | An unfortunate attempt that fails due to a typo |
Strange Text Morph Examples
When it comes to group animations, text can be much trickier to work with compared to image morph transitions. Morphing text often results in some unexpected glitches. Below are some of the most common issues you’re likely to encounter in your own projects.
Morphing text into text
| Name | Description |
|---|---|
| Inline to block morph | A typical pitfall when morphing links to headings |
| Unintended ratio differences | When both elements are inline and still differ in aspect ratio |
Improved Text Morph Examples
Now that you’ve seen the potential pitfalls of morphing text in animations, you’re probably eager to find out how to avoid these issues. Good news: there are some effective solutions you can apply to smooth out these rough edges and achieve cleaner transitions.
Morphing text into text
| Name | Description |
|---|---|
| Inline to block morph | A typical pitfall when moving links to headings |
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.