How to Move a Text on an SVG Path on Scroll using React
A website tutorial on how to animate a a Text along an SVG Path on Scroll using React and Framer Motion. Used with the Lenis Scroll for added smoothness and Next.js. Inspired by: https://chivichivi.com/en/
Source Code / Live demo:
https://blog.olivierlarose.com/tutori...
00:00 Intro
00:38 Creating the SVG
1:22 CSS styling
1:55 Adding texts on the curve
5:00 Tracking the scroll
7:13 Moving the text on scroll
11:21 Adding smooth scroll
12:42 Adding a sticky footer
17:19 Outro
More animations: https://blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion
