<ul class="list">
    <li class="item">
        <span class="text">
            <span class="number-label">01</span>
            Home
        </span>
        <span class="text" aria-hidden>
            <span class="number-label">01</span>
            Home
        </span>
    </li>
    <li class="item">
        <span class="text">
            <span class="number-label">02</span>
            Photos
        </span>
        <span class="text" aria-hidden>
            <span class="number-label">02</span>
            Photos
        </span>
    </li>
    <li class="item">
        <span class="text">
            <span class="number-label">03</span>
            Contact
        </span>
        <span class="text" aria-hidden>
            <span class="number-label">03</span>
            Contact
        </span>
    </li>
</ul>

<script type="module">
    import { animate, hover } from "https://cdn.jsdelivr.net/npm/motion@12/+esm"

    hover(".item", (element) => {
        const text = element.querySelectorAll(".text")

        animate(text, { y: -42 }, { duration: 0.3 })

        return () => {
            animate(text, { y: 0 }, { duration: 0.3 })
        }
    })
</script>

<style>
    .list {
        display: flex;
        gap: 20px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-direction: column;
    }

    .item {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        height: 32px;
        justify-content: flex-start;
    }

    .text {
        color: #f5f5f5;
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
        line-height: 32px;
        will-change: transform;
    }

    .number-label {
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        opacity: 0.5;
        font-variant-numeric: tabular-nums;
    }
</style>