Animate Text on Scroll | SVG textPath Tutorial | Keyssentials: Quick Tips by @keyframers

Welcome to Keyssentials, quick
tips for animation on the web. In this video, I’ll be covering how to
do a SVG text path animation on scroll. This tutorial was inspired by a great
effect from New York times article where the text slides into view as you scroll. Pretty cool! To make a similar effect, we’ll start by
creating a path in Affinity Designer or Illustrator, whatever
you’re most comfortable in. And just draw a nice curved path
and then export that as SVG. We’ll quickly run that path through SVG
OMG to reduce a lot of the extra code that the graphical editor puts in there. Then we’ll move over into our code where
we have a simple article already set up with a few paragraphs and styles. We’ll insert our SVG where we want the
effect to appear, and we can also clear out a few of these extra attributes that
SVG OMG did not take out, which are not necessary. To add text into our graphic, we wrap it
with a element directly in the SVG. For this text to follow along our
, we first need to add an ID, say #text-curve, and then we’ll wrap our text
down below in a with a HREF pointing to that ID of #text-curve. This produces a great effect
all on its own because it’s plain text and an SVG that is still accessible. It can be screen read or copied and pasted
it out, which is really quite great. We can use ‘s, startOffset
attribute to change where the text is on our path. In a moment, this is the value we’ll
animate with JavaScript to get the sliding effect. Let’s go ahead and give our
an ID of text-path and our SVG an ID of text-container. Then in our JavaScript, we’ll use
document.querySelector to target our text path and store it in a variable. To animate the text along the path, first,
we’ll write a function to update the offset of our text. Next we’ll write an onScroll function to
control our animation that will get called whenever the window is
scrolled with addEventListener. Performance can be an issue because this
function will get called a lot when the user is actively scrolling. So let’s wrap our update code
and requestAnimationFrame. This helps ensure we’re only updating the
page when the browser is rendering a new frame, which should prevent
our animation from being jerky. Right now, we can call our
updateTextOffset function using the window.scrollY value to see
that everything’s working. However, this isn’t the same effect we’re
going for, so let’s get into some math to get our text moving in
the right direction. We want to track the SVG’s position to
know exactly where it is in the viewport. Let’s use querySelector
for the #text-container. Inside of our scroll function, we’ll call
getBoundingClientRect to get an object containing the element’s width, height,
and X, Y coordinates in the viewport. Dividing the Y coordinate by the window
height will give us a percentage like representation of where the element is in
the viewport with 1 being the bottom and 0 being the top. Now we want to combine this percentage
with the length of the path. To get the path that’s being used, we can
use querySelector plus getAttribute href to make sure we’re getting the right path. Then with getTotalLength, we
can get the length of the path. Multiply the scrollPercent times the
pathLength and Presto: we have our text moving with the scroll! We may want to additionally multiply that
by two to increase the effect, making sure that our text is offscreen
and animates a little faster. As we scroll, we’ll also want to call
update text path offset with the path link on first run so that the text starts
from offscreen before any scrolling. If we want to hide our path that the text
is actually moving along, we can simply remove the stroke and our text
will move along our invisible path. There you have it: a scroll
based SVG text path animation! Links to the final code live demo, and
other resources are available below. If you’ve enjoyed this episode, be sure to
hit the thumbs up button and subscribe to the Keyframers channel if
you’d like to see more. You can also support us by buying
some developer merch from our store, or pledging
at Thanks for watching. Adios, Animigos!


Add a Comment

Your email address will not be published. Required fields are marked *