Family-style dialog

Introduction

The Family-style dialog example shows how to create a smooth, animated dialog using the HTML <dialog> element combined with the browser's View Transition API.

This example uses Motion's animateView function to orchestrate seamless transitions between the open and closed states, morphing the trigger button into the dialog's action button.

Motion's animateView function provides a simple way to work with view transitions, handling the complexity of coordinating DOM updates with smooth visual transitions. The example also uses animate for button press interactions and press to detect user taps and clicks.