https://github.com/codrops/animatesvgtextpath
Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
https://github.com/codrops/animatesvgtextpath
animation intersectionobserver-api layout scroll svg svg-filters textpath
Last synced: 3 months ago
JSON representation
Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
- Host: GitHub
- URL: https://github.com/codrops/animatesvgtextpath
- Owner: codrops
- License: mit
- Created: 2020-02-25T09:26:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-05T13:23:26.000Z (over 5 years ago)
- Last Synced: 2025-07-06T11:48:00.175Z (7 months ago)
- Topics: animation, intersectionobserver-api, layout, scroll, svg, svg-filters, textpath
- Language: HTML
- Homepage: https://tympanus.net/codrops/?p=47831
- Size: 14.5 MB
- Stars: 57
- Watchers: 2
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Animating SVG Text on a Path
A demo where we are animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
[Article on Codrops](https://tympanus.net/codrops/?p=47831)
[Demo](http://tympanus.net/Development/AnimateSVGTextPath/)
## Installation
Install dependencies:
```
npm install
```
Compile the code for development and start a local server:
```
npm start
```
Create the build:
```
npm run build
```
## Credits
- [imagesLoaded](https://imagesloaded.desandro.com/) by Dave DeSandro
- Images from [Unsplash.com](https://unsplash.com/)
## Misc
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Codrops](http://www.codrops.com)