Back to Motion Prompt examples
Landing page & web effects · #08
Highlighter animation
A highlighter stroke is drawn under key words. As the copy scrolls into view, a yellow highlighter stroke is drawn left to right across the lower half of the key words.
Scroll effectshighlightermarkertext-highlightemphasisscroll-revealcopyunderline
Full motion specification
How the movement works
Use it in landing-page copy to make the one phrase that matters stand out as it is read.
- 01Scroll: 0→90 px at 0.35–1.0 s, 90→180 px at 1.6–2.2 s, 180→0 at 3.3–4.4 s (cubic ease-in-out).
- 02Two lines of copy (20 px, bold) at 190 px and 290 px down the page, hidden below the view at first.
- 03When a line's top passes the trigger line (80% of the viewport height, 134 px), the stroke under its key words starts.
- 04Stroke: yellow #FFE36B, 11 tall, in the lower part of the text (8 px above to 3 px below the baseline). Width 0 → word width from the left over 0.8 s (cubic ease-out), drawn behind the text.
- 05Lines that leave the bottom of the view are reset out of sight.
Prompt
When the key phrase scrolls into view, draw a yellow highlighter animation under it, left to right in 0.8 s.