Build a Mask Cursor Effect With Nextjs and Framer Motion

00:00 Intro
00:28 HTML and CSS
1:06 Creating the Mask
2:05 Getting the position of the mouse
3:19 Creating the cursor
5:03 Animating the size
5:29 Outro


Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion

[MinhPhamDesign]

Hey Olivier, Great tutorial! I'm the designer who did the original site (well, I only designed it, not smart enough to code it lol).
It's great to see how you nailed it so nicely!

[Sviatoslav-wvqy]

If you try to repeat this animation, check your Framer Motion version. If it's 11.11 - 11.18( the last for the moment I write this comment), downgrade it to 11.10, otherwise it will lag. I spent around 5h trying to understand what's the difference between my code and his to eventually get that it's just Framer Motion's issue.

[kranthisedamaki]

I love the video style! The seemingly perfect audio transitions and no slow typing it out! It's great! Thank you!

[pter]

Broo that is so sick, I recently started coding in JS and theses kinds of videos are so inspiring. Keep up the work bro!

[oloyang]

Hi Olivier, great work! :D
It's funny when in the end of the video you this was a very easy animation to do xD. Well, maybe for you ;). You should definitely create a tutorial on framer motion with your skills. There literally isn't an in depth tutorial on framer motion on the entire YouTube. It would probably be the most viewed tutorial regarding framer-motion on YouTube. Keep up the great work!

[ndukachukz]

How can I be like you. I’m overwhelmed tbh. Simple, but creative. I love your skills ❤

[hfvphgi]

You should make a video about your educational journey. I think it would be inspiring for a lot of people. It would defiantly be for me for sure 🙏

[ssan]

amazing :) learning framer motion and learning alot from your tutorials. thank you so much olivier 🙏

[rodrigosalmeron]

Bro you are killing it ! Hacking all awwwards resources xD. Keep it going bro 🙌🙌🙌

[istvantibortoth]

Thanks so much Olivier! Your your videos are just what I've been looking for. Short, easy to understand and they help to spice up my simple designs 👍.

[pritamgain]

perfect video for what I was looking for past couple of days... :)

[akashctd]

Wow, bro this is both cool and incredibly helpful, tq for making such awesome videos 🙏

[darkrager]

Super content bro, i learn new things by watching your every video. Keep rocking bro 😊

[khaledxify]

always great topics never disappoint thanks brother

[rkcoder]

These are awesome! could you please make some of this kind of stuff using tailwind too?

[soyelchicodelanus]

this guy is crazy! I love it! gracias!!

[ruizxzx]

niceee one broo...checked this few days ago on your website demos

[mmaarafat]

Hi, bro. You are doing really great 👍

[feastofsteven]

Thanks Olivier, great tutorial. I have the same question as the previous viewer - if I am using this on a number of components that make up the entire page (hero, about, work, etc.), how can I use this across all of those components/sections? As it is, if I add it to each section individually it acts very strange as you cross from one section to the next. Probably missing something simple on how to structure a page here.

[madhoundes]

such an awesome tutorial I was wondering can I develop this animation technique and implement it to be inside framer sites as compoment code override ?