There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But… the pictures aren’t actually selfies because they are taken by someone else. The article has this hilarious line of text that wiggles by on a curved line as you scroll down the page.

Let’s look at how they did it.

Movie:

The curved line is drawn in SVG as a <path> , and the <text> is set upon it by a <textPath> :

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55"> <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path> <text width="100%" style="transform:translate3d(0,0,0);"> <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve">*The pictures are not technically selfies.</textPath> </text> </svg>

The movement trick happens by adjusting the startOffset attribute of the textPath element.

I’m not 100% sure how they did it, but we can do some quick hacky math by watching the scroll position of the page and setting that attribute in a way that makes it move about as fast and far as we want.

const textPath = document.querySelector("#text-path"); const h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; document.addEventListener("scroll", e => { let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100; textPath.setAttribute("startOffset", (-percent * 40) + 1200) });

Here’s a demo:

See the Pen

Selfie Crawl by Chris Coyier (@chriscoyier)

on CodePen.

Text on a curved line is a cool design look for any number of reasons! It just isn’t seen that much on the web, so when it is used, it stands out.

See the Pen

CodePen Challenge: Hearthstone Card by wheatup (@wheatup)

on CodePen.