<h2>Customizing Modal Animation</h2>

<p>You can provide your own animation by writing a transition rule
that applies <code>inHelper("liquid-modal")</code>. The default,
built-in rule looks like this:</p>

{{code-snippet name="default-modal-rule.js"}}

<p>It uses the {{#link-to "transitions.explode"}}explode{{/link-to}}
transition to separately animate the dialog box's container (which has class <code>lm-container</code>) and the background overlay (which has class <code>lf-overlay</code>).</p>

<p>There are also <code>fromModel</code> and <code>toModal</code>
constraints that will match the name of the modal component that is
coming or going.</p>
<h2>Customizing Modal Animation</h2>

<p>You can provide your own animation by writing a transition rule
that applies <code>inHelper("liquid-modal")</code>. The default,
built-in rule looks like this:</p>

{{code-snippet name="default-modal-rule.js"}}

<p>It uses the {{#link-to "transitions.explode"}}explode{{/link-to}}
transition to separately animate the dialog box's container (which has class <code>lm-container</code>) and the background overlay (which has class <code>lf-overlay</code>).</p>

<p>There are also <code>fromModal</code> and <code>toModal</code>
constraints that will match the name of the modal component that is
coming or going.</p>

Fix `fromModel` to `fromModal` in modal docs
Fix `fromModel` to `fromModal` in modal docs
