Moving Text on a Curved Path

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 , and the is set upon it by a :

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.