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