Build a Mask Cursor Effect With Nextjs and Framer Motion 

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!

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

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

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

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 👍.

always great topics never disappoint thanks brother

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

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 RU-vid. It would probably be the most viewed tutorial regarding framer-motion on RU-vid. Keep up the great work!

amazing as always 👌

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

Another great video by oliver

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

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

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

Awesome, very inspiring !

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

Great video!

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 🙏

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.

Quality content... 🔥

Thank you!

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

Hi, bro. You are doing really great 👍

Great video

Olivier, you little genius.

always creative 😎😎

Nice job Bro :)

i love it

Nowaaaaaaay here we go again 🎉🎉🎉🎉

Obrigado ai amigo ótimo video continue postando video de framer-motion ou até quem sabe voce possa fazer videos de three.js tbm valeu

Amazing video!! I just want to know how can I update the x and y position when I scroll as well?

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 ?

+Sub , simple and clean explaining & directly to the point , may i ask how long did take you to obtain this level of knowledge :D ?

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

Loving it! thanks a ton for this tutorial Also is there a way to use this directly on Framer app?

I was following this tutorial, when I scroll the effect disappear, if i use fixed for mask, the offscreen content got fixed, so how to make that effect persist like original site and how to use tailwind for this Thank you for your time and awesome tutorials

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.

hey bro , i love your videos , i just incountered a problem while tryin to remake this animation , when i try to scroll the mask stops on following the mouse .

Olivier whatsup, I would love a video on how denis does his navigation on his award winning portfolio. The way we do it, when you trynna navigate back to the home page, the preloader comesback. But in his version its like only when the components mount. Thank you!!! Also the page transitions would be great

This is nice!! Can this be used as a code override in framer?

Hey Oli !! I love your videos (and thumbnails). thanks for the great content and for teaching us these cool animations) I wanted to ask about an issue I face with scrolltrigger when using next.js dynamic imports. It seems that dynamically importing components messes up the scrolltrigger position. I think it has to do with the component rendering before others and so its position changes? I am not sure. any ideas?

You're so so good man!! How do you think of such solutions?

oh my god

hi olivier, could you please tell me how can I make it work if there is more than one paragraph in multiple sections, and I want the same cursor to reveal the hidden all paragraphs like it is in the original website.

Good morning, what a cool and really good video, but it happened that I was trying to replicate it in my training application, and it seems that my animation is at 5 fps while in your code it is 60 haha, can anyone tell me what it could be ? I'm doing it with ts, the only glaring difference I see. (I have suspicions that the animation is only occurring when the mouse stops and not while it moves) ps: I'm very bad at English, sorry if there were considerable mistakes thanks in advance

Hey great tutorial. I'm trying to recreate it with tailwind but I can't find the equivalent of mask-image property in tailwind, any idea what is it?

Can you make the same thing in html css and js + gsap ? Or you can point me in the right direction. Anyway amazing content. Really amazing.

I looove this content. What path would you recommend to become an interactive web developer? I'm currently using Wordpress with theme builders and a little bit of code but I would really like to learn a js framework, gsap and so on but actually don't know where to start. I'm pretty good at HTML and CSS and know just the basics of JS, what would you suggest? I feel like I could replicate videos like yours and learn but maybe I'm missing the base to fully understand it? Maybe I should be super confident in JS and then React and then I would finally understand gsap and all crazy animations? or is there a faster way? Don't know if it makes sense but I'd love to learn a creative developer's perspective!

In next 14 I'm using your exact code but the mouse animation is laggy. Any solution?

WOW. I thought, it was gonna be sooo much coding and logic building but you simpliofied it way more. Would you mind cloning his website? 🙈 Something similar? I want to learn all the animations the website has? Is it possible?

👌🤔

Hi, can you tell me how to handle the mouse position when scrolling? I don't want the mask to be animated, I just it stick to its position when scrolling. Just like it is Minh Pham's website.

im new to this instead of using a flex im using a relative and absolute layout when i tried to increase the height and width of the mask the whole layout gets collapsed

Thumbnail is cringe, but content is great! Keep going, quality of the videos is sick!

my cursor is pretty laggy ... do you happen to know why?

IS THERE ANY WAY WE CAN MAKE THIS KINDA WEBSITE USING NO CODE OR IT IS NOT POSSIBLE YET

can you clone website you show first in a play list ?

When i open devtools (in any browser), the animation doesn´t look smooth. Is this happening only to me?.

I think u can rest sometimes, u already have so much content, man xD

How do you know all these things?

I am trying to create this with only Javascript but failed can anyone help me 😢

can you make tutorial make hover effect like 0:08

why this kind of things very easy to do but a lot of websites dont do it?

anybody else's mouse animation is lagging as hell with framer motion?

and for the no. of components ? what can we do

Amazing but its a suggestion please do not start with speed do step by step with coding explaination