← All elements
<div class="rv"><p>Design first.</p><p>Then code it.</p><p>Ship it small.</p><p>Iterate often.</p></div>About this animation
Text blocks that sweep in from the left as they enter the scroll area, using view() timelines and a clip-path animation.
How it works
Each paragraph has an animation tied to view(), which means progress follows how far the element has entered the scroll area. The animation range covers the first 80 percent of its entry, during which a clip-path inset reveals the text from left to right while its opacity rises, so the words sweep in as you scroll.
Ways to customise it
- Change the animation range to start earlier or later.
- Edit the font size and colours.
- Change the clip-path direction to reveal from another side.
Good to know
Works in current Chromium and Safari, and elsewhere the text simply shows without animation. Content stays in the page so search engines and readers can read it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.