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 when it is used, it stands out.

See the Pen
CodePen Challenge: Hearthstone Card
by wheatup (@wheatup)
on CodePen.

The post Moving Text on a Curved Path appeared first on CSS-Tricks.

Related Post

#234: React Grids

Show Description Cassidy is on to talk about powering the grids on CodePen with React to make them faster and…