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

Additional Resources:

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

Topics covered:

* SVG
* TextPath for curved text
* Scroll Animation
* Vanilla JavaScript

[CoreyThompson]

I love the length of this. It’s very helpful content and the presentation is to the point enough so that I don’t have to jump around a 15-20 minute video and accidentally miss a crucial step.

[dallaserraco]

I've never watched something so fast that simultaneously felt so chill. 👏🏻 Genius use of SVGs and JS. Defo doing this.

[vm-dev]

Epic, quick, easy to understand, yes please, more please!

[THBADRO]

Clean, short, and efficient. Thank you for the great tutorial!

[blokche_dev]

Love the format! I still have a quite long playlist of the unwatched keyframers' videos. ^_^'
It would be great to have some isolated techniques you use by providing illustration of what's going on under the hood (layers technique and so on...).
Anyway, thanks for sharing guys!

[louddude]

Really like this format - fast and furious)

[marcograhl]

Those Keyssentials is a super format, love it -> You have my Twitch Prime Free Sup in your Bag, could't be using it for a better channel, Thxs

[AmandaLucaseu]

great tutorial, clear, concise and short.

[Harridl]

hi! This is awesome! Do you know how to make the text scroll in the opposite direction? Thanks!

[yaeseongna]

I got impressed from your work! How can I move the textpath more than one?

[grantemerson]

Is it possible to add text to an ellipse element? I'm trying to put text on an oval

[ionutbalan]

Great video! But how could I change the direction of the animation, so that the text would animate from left to right?

[KelpsSousa]

Excellent video! Short, informative and clear. Well done. I also really liked the code styling you use on CodePen. How is it called?

[danhayman]

Hi there, Thanks for the great tutorial. I am trying to use this for a list of names that will be added to over time. When all the names are in view I don't need it to animate but when they start to flow off the end of the curve and out of frame I need the hidden names to animate into view and no further. Is this possible?

[francescomhie]

do you know if there is a plugin for wordpress ?

[michaelblum]

Awesome video! Was wondering though if it's possible to animate other, non-text SVG elements in a similar fashion? The closest I was able to find was <animateMotion> and <mpath>, which seem to only allow duration-based animations, not giving the same control that the startOffset attribute gives.

[jenskold]

Hi im trying to add two different text-container on different positions on the site, but its not working. How to use this with multiple text on a site ?

[mackenzielowry]

Thank you for the tutorial! Do you have any suggestions for using this effect as a "fixed" animated text path (rather than scrolling up and down with the page elements)?