Animating SVG Text on a Path

View demo Download Source

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 usedSVG 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:

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 enjoyour examples and find them useful!

References & Credits

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章