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,
keyframe.rs/merch or pledging
at patreon.com/keyframers.
Thanks for watching.
Adios,
Animigos!
