View Transitions API

• Slides Google IO 2023

Examples

Fade In Text

1. Fade In text (Vanilla JS)
   • Source Code
   • Demo
2. Fade In text (View Transition API)
   • Source Code
   • Demo
3. Fade In text (Custom View Transition API)
   • Source Code
   • Demo
4. Custom Fade In text
   • Source Code
   • Demo
5. Fade In text (Reduced Motion)
   • Source Code
   • Demo

Simple Button and Text Animation

1. Simple Button and Text Animation
   • Source Code
   • Demo
2. Simple Button and Text Animation (Custom)
   • Source Code
   • Demo

Galery Example

• Source Code
• Demo

View Transition API (React Router)

• Source Code

Resources

• Smooth and simple transitions with the View Transitions API - Google
• View Transitions API
• What's new in web animations