MDN View Transition API examples
This set of examples demonstrates usage of the View Transition API (also see the specification).
Basic examples
View transition types examples
- SPA transition types gallery: SPA image gallery that uses transition types to apply different transition animations when the images are moved between using the prev button, next button, and by clicking directly on an image.
- MPA transition types example: Story app with a chapter on each page. Demonstrates how to apply view transition animations across pages selectively with a transition type applied using the
@view-transition at-rule.
- MPA multiple transition types example: Story app with a chapter on each page. Demonstrates how to apply different view transition animations across pages selectively with different transition types. The transition type is determined on the fly with JavaScript during the navigation.