Family-style dialog
Matt Perry
In this tutorial, we're going to build the Family-style dialog example step-by-step.
This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Family-style dialog tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
