Scroll rise
Letters float up into place, stretched tall at first, as the text scrolls into view; the scroll drives every frame.
- enhancer
- scroll
- letters
- stretch
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Scroll rise example
Scroll down in this box
Scroll, and every letter rises.
Scroll down in this box
Scroll, and every letter rises.
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<div class="m-demo-scroll" tabindex="0" role="region" aria-label="Scroll inside this box"><p class="m-demo-note">Scroll down in this box</p><p class="m-demo-xl" data-motion="scroll-rise">Scroll, and every letter rises.</p></div>import { ScrollRise } from "./motion/react/ScrollRise";
<ScrollRise>Your content</ScrollRise><script setup lang="ts">
import ScrollRise from "./motion/vue/ScrollRise.vue";
</script>
<template>
<ScrollRise>Your content</ScrollRise>
</template>const el = document.querySelector("#title");
el.dataset.motion = "scroll-rise";The wrappers: ScrollRise.tsx (React, TypeScript) and ScrollRise.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-stagger | 0.035 | Head start of each letter (share of the scroll) |
data-motion-stretch | 2.2 | Stretch at the start |
data-motion-start | 1 | Starts when the top reaches (share of the window height) |
data-motion-end | 0.55 | Ends when the top reaches |
Accessibility
The scroll position sets every frame, so the letters follow the reader both ways. Each letter keeps its measured width and moves with transforms only, so nothing reflows; screen readers hear the text once. Text above the end line is simply shown. Reduced motion shows the text in place. Frames run only while the page scrolls and the text is on screen.
Size
scroll-rise.js is 0.8 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.