Stagger from edges

<ol class="example" aria-label="Items staggered from the edges">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ol>

<script type="module">
    import { animate, stagger } from "motion"

    animate(
        ".example li",
        { opacity: 1, y: [50, 0] },
        { delay: stagger(0.15, { from: "edges" }) }
    )
</script>

<style>
    ol.example {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ol.example li {
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        border-radius: 10px;
        background-color: var(--hue-5);
        color: var(--white);
        font-family: var(--font-mono);
        opacity: 0;
    }
</style>