Elements fade up as they enter the viewport. The most common modern web animation — done with IntersectionObserver and CSS transitions.
Elements are hidden (invisible and/or off-position) when the page loads. As the user scrolls down and a section enters the visible area of the screen, that element animates into place. The classic version is "fade up" — element starts invisible and slightly below its final position, then fades in and slides up.
The IntersectionObserver JavaScript API watches when elements enter or leave the viewport. When an element enters, a CSS class is added to it (like .visible). That class triggers a CSS transition. The element starts with opacity:0 and transform:translateY(40px), then transitions to opacity:1 and translateY(0).
Scroll inside the box. Each row staggers in as it crosses the threshold.
Hide everything but the cursor and the prose.
Drop-in widgets — tables, embeds, snippets.
Every action one keystroke away. Always.
Multiplayer cursors with sub-60ms sync.
Threaded discussions that scroll with the doc.
Per-block access — sensitive data stays hidden.
Anonymous metrics. Opt in, not out.
Works offline. Syncs when you're back.
Markdown export, every page, every time.
Build a features page where every card and section animates into view on scroll. Use IntersectionObserver to detect when each element is 20% visible. Apply these default start states: opacity:0 and transform:translateY(30px). On intersection, add class .visible which transitions to opacity:1, transform:translateY(0) with transition duration 0.6s and ease: cubic-bezier(0.4, 0, 0.2, 1). For 3-column feature grids, stagger each card by 0.1s extra delay (first card 0s, second 0.1s, third 0.2s).