Posted on

Animating SVG Text on a Path

Animating SVG text on a path on scroll has been explained really well in this great video tutorial by the keyframers. The basic idea is to couple the startOffset value of a textPath element with the scroll position, allowing the text to move along its path while scrolling.

We wanted to take this a step further and integrate it in a real website example with some more features.

In our experiment, we made the animation smoother and used SVG filters, while also using different paths. Additionally, we worked with the Intersection Observer API for animating only the texts that are in the viewport. The intensity of the SVG filters depends on the scroll speed.

If you want to learn more about SVG filters and how to use them to create interesting effects, have a look at our dedicated series written by Sara Soueidan:

Please be aware that animating SVG filters in Firefox has dreadful performance. This has been like that for years, unfortunately. There are a number of bugs filed regarding animating SVG filters and even rendering SVG filters:

Sadly, the outlook on solving these issues in Firefox don’t look too good as these have all been marked with priority P3, which means:

“This isn’t a bad idea, and maybe we’ll want to implement it at some point in the future, but it’s not near-term roadmap material. Some core Bugzilla developer may work on it.”

So it’s a good idea to keep in mind that if you are working with SVG filters and plan to animate them, it’s probably best if you leave Firefox out of the equation. This is exactly what we did in our example, so you won’t see the fancy filter magic if you open the demo in Firefox. However, if you do want to try it out, you can do so with smaller areas, i.e. smaller texts. Although it won’t be as smooth as in Chrome, it will work better than with larger texts.

We hope you enjoy our examples and find them useful!

References & Credits

Animating SVG Text on a Path was written by Mary Lou and published on Codrops.

Posted on

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 <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.

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