Reveal text effect

Introduction

The Reveal text effect example shows how to create an elegant hover animation where text slides upward to reveal alternative content underneath. This effect uses the hover function from Motion to detect hover interactions and the animate function to create smooth vertical animations.

The hover function makes it easy to add enter and exit animations to elements, while animate provides a simple way to animate DOM elements with hardware-accelerated transforms.

Get started

Let's start with the basic HTML structure. Each menu item contains two identical text elements stacked vertically, with the second one hidden initially:

<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">
</script>

<style>
    /** Copy styles from example source code */
</style>

The key to this effect is having two identical text elements inside each item. The second element has aria-hidden to keep it accessible since it's purely decorative.

The styles use overflow: hidden on the .item to clip the text, and set a fixed height: 32px to show only one line at a time. The text elements are positioned within this container so they can slide up and down.