A demonstration of the View Transition API and its capabilities

A overview of the View Transition API and its capabilities. Used for a presentation at the Dallas Software Developers meetup.
Combines CSS and JavaScript functions to demonstrate element phasing techniques between page changes.

Website

Slides

How It's Made:

Tech used:

Optimizations

• Review more animation techniques that can be used with the API
• Test integration with React.js using either FlushSync or React Router

Lessons Learned:

• CSS

  • Using the view-transition-name property to designate element siblings between related pages.
  • Using the paint: contain property to have elements remain static between page transitions.

• JavaScript

  • Working with the path interception functions that are integral to the API
  • Progressive enhancement functions for runtime environments incompatible with view transitions