Select Page

Category: textPath

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 his 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 pictures are not technically selfies. 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...

Read More