How to Make an Animated SVG Curve using Next.js, Sine, Linear Interpolation
A common svg wave animation seen in a lot of awwwards website. Made with React, Next.js and the Sine function. Inspired by https://hello.cuberto.com
Demo / Source code: https://blog.olivierlarose.com/tutori...
00:00 Intro
00:26 Creating the SVG
3:34 Curving the line on mouse move
5:14 Creating the wobble on mouse leave
9:23 Resetting the animation
9:59 Debugging the animation
11:17 Making the curve bigger
12:02 Curving from a specific point
13:56 Outro
More animations: https://blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #svg #morph
