Mask rise

When to use

Use when a line of type enters from under an invisible edge. The mask box is taller than the line: 0.25em below for descenders (g, y, p) and 0.1em above for accents, pulled back with negative margins so the layout does not move. Without that padding the descenders are cut on the way up and the settled word still looks clipped. Clip: mask-rise.mp4. Demo: demo/mask-rise.html.

The code

.mask { overflow: hidden; padding: 0.1em 0.1em 0.25em; margin: -0.1em -0.1em -0.25em; }
.mask > span { display: block; translate: 0 118%;
               animation-name: rise; animation-duration: 0.7s; animation-delay: var(--beat-1);
               animation-timing-function: var(--settle); animation-fill-mode: both; }
@keyframes rise { to { translate: 0 0; } }

Easing and timing

The clip runs 1 s. The look is paper.

The clip uses one named ease from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

Notes

<h1 class="mask"><span>typography</span></h1>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
document.documentElement.style.setProperty('--settle', EASE.land);
</script>

For two or three lines, one .mask per line and a 60 ms step in animation-delay between them.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: none; a line rising into place is a read, not an event.