Animating SVG Text on a Path

A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.

By Manoela Ilic in Playground on February 26, 2020

Demo Code

From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!

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!