Skip to content
Artwork for Frontend First
Frontend First · Jun 12, 2024 · 53 min

View Transitions in React

Ryan tells Sam about his experiments with using the new View Transitions API in a React photo gallery app. He talks about how he likes the flexibility of the API, how to think about integrating it into any client-rendered app regardless of the framework, and how he used a Promise with an Effect to tie a View Transition to a React Transition. Topics include: 0:00 - Intro 1:11 - What it’s like to integrate View Transitions with React 7:30 - How View Transitions work 16:09 - Building a gallery that animates photos across page navigations 19:38 - How to use startViewTransition for enter/update/exit animations 26:52 - Using a Promise to link a View Transition to a React Transition 43:02 - Do View Transitions replace framework-specific animation libraries? 45:17 - Using DevTools to preview and tweak transitions Links: easings.net Ionic Framework's animation curves Shu’s next-view-transitions library

0:00-53:21

transcript

No transcript — this publisher did not publish one.

show notes

Ryan tells Sam about his experiments with using the new View Transitions API in a React photo gallery app. He talks about how he likes the flexibility of the API, how to think about integrating it into any client-rendered app regardless of the framework, and how he used a Promise with an Effect to tie a View Transition to a React Transition.

Topics include:

  • 0:00 - Intro
  • 1:11 - What it’s like to integrate View Transitions with React
  • 7:30 - How View Transitions work
  • 16:09 - Building a gallery that animates photos across page navigations
  • 19:38 - How to use startViewTransition for enter/update/exit animations
  • 26:52 - Using a Promise to link a View Transition to a React Transition
  • 43:02 - Do View Transitions replace framework-specific animation libraries?
  • 45:17 - Using DevTools to preview and tweak transitions

Links:

links3