Animating SVG Text on a Path

Celý článek

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 detecting if an SVG that needs to be animated is in the viewport. The intensity of the SVG filters depend 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:

• SVG Filters 101
• Outline Text with <feMorphology>
• Poster Image Effect with <feComponentTransfer>
• Duotone Images with <feComponentTransfer>
• Conforming Text to Surface Texture with <feDisplacementMap>
• Creating Texture with <feTurbulence>
• SVG Filter Effects: Moving Forward

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:

• Bug 1456932: SVG blur filter is slow
• Bug 422371: SVG feTurbulence filter is far too slow
• Bug 1583828: Slow SVG filter animation
• Bug 483868: Firefox much less responsive than Chrome while scrolling/enlarging SVG map with 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

• Animate Text on Scroll | SVG textPath Tutorial | Keyssentials: Quick Tips by @keyframers
• Moving Text on a Curved Path on CSS-Tricks
• Perfecting Paths for <textPath> by Amelia Bellamy-Royds
• Images from Unsplash
• imagesLoaded by Dave DeSandro

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