Animate without disrupting
the reading.
A small movement follows scrolling. Text and images remain visible from the start: the effect adds to the reading experience without controlling access to the content.
See the effect in a project →Scroll inside this frame. The content stays readable.
What this project demonstrates
Choose an appropriate effect, provide a fallback and keep reading accessible.
What you can check
The example works without JavaScript. With reduced motion, the same elements remain readable and static.
The need and the decision
Give pages a rhythm without installing an animation engine. The element’s position in the viewport drives the movement through animation-timeline: view(). A browser that does not support this property keeps the content static.
Implementation decisions
- Movement uses transform; no initial zero opacity hides the content.
- The @supports rule limits the effect to supporting browsers.
- prefers-reduced-motion keeps a static presentation.
- Scrolling back reverses the motion: it follows the reading rather than playing an entrance once.
Inspect the code used on this site
This excerpt is read from the component or stylesheet at build time.
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.reveal {
animation: reveal-in linear both;
animation-timeline: view();
animation-range: entry 5% entry 45%;
}
}
}
@keyframes reveal-in {
from { transform: translateY(1.2rem); }
to { opacity: 1; transform: none; }
}What the demo alone does not prove
A scroll timeline provides progress, not application state. In the travel journals, identifying the active chapter and setting aria-current requires separate logic. Choosing transform limits layout work; it does not guarantee identical smoothness on every device.
For a project connected to a practical need and public sources: the Foncier case study.