Motion+

Reveal text effect

An example of revealing text on hover using flexbox and Motion's layout animations.

Time
5 min
Difficulty
Beginner
Access
Motion+
>Live exampleOpen in new tab

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.