dom-examples

MDN View Transition API examples

This set of examples demonstrates usage of the View Transition API (also see the specification).

Basic examples

• SPA example: Demonstrates basic view transition usage in a SPA image gallery.
• MPA example: Demonstrates basic view transition usage in MPA.
• MPA homepage example: Another MPA view transitions example.
• MPA homepage example: Demonstrates usage of the match-element value of the view-transition-name property

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.

This site is open source. Improve this page.