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