A website animation tutorial featuring a sticky and magnetic cursor effect made with Next.js, Framer Motion and the Math.Atan2() function.

Demo / Source code: https://blog.olivierlarose.com/tutori...

00:00 Intro
00:16 Project Structure
00:54 Mouse Cursor
2:54 Mouse Cursor - Smooth
3:51 Sticking the Cursor
7:25 Sticking the Cursor - Increasing the Bounds
9:38 Sticking the Cursor - Magnetic Effect
11:49 Stretching the Cursor
15:31 Rotating the Cursor
18:57 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