How to Make a Sticky Cursor with NextJs and Framer Motion
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
