Build a Mask Cursor Effect With Nextjs and 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!

[@olivierlarose1]

Hey Minh! Love your work, that's a super well designed website, I enjoyed remaking it. Love your videos btw! Keep it up

[@Alex.Shalda]

Awesome design! I saw your original video

[@kranthisedamaki]

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

[@olivierlarose1]

Thanks happy to hear that!

[@p3ter408]

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

[@olivierlarose1]

Nice keep going bro👊

[@Sviatoslav-wv3qy]

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.

[@zacmuturi4522]

The specific version is 11.0.10 thanks a lot for the update, your 5hours were not wasted at all, you just saved me and potentially other peeps 5 or more hours..

[@NachoGramajoFeijoo]

Hi Zac, I downgraded the Framer Motion version but I the mask is not following the cursor until I stop moving it. The mask following the cursor animation is working kind of paused, do you know what it can be? @@zacmuturi4522

[@rs844]

thanks man

[@arjuntandon2711]

Thanks a lot for this comment. Been trying to get this working for so long . I even tried using motionvalues to do so but still was not able to see any result. I tested newer and latest versions but still this animation was laggy, so I had to downgrade to 11.0.10. Just curious , is there some other way achieve this animation in the latest versions?!

[@mcmanimie]

@@zacmuturi4522 Add me to that list.

[@ssan4777]

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

[@olivierlarose1]

My pleasure🤝

[@rodrigosalmeron7216]

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

[@olivierlarose1]

😂gotta reveal all the secrets! Thanks for the support🤝

[@oloyang431]

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

[@ndukachukz8067]

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

[@olivierlarose1]

Practice makes perfect💯

[@DevangPatel-b6u]

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 🙏

[@olivierlarose1]

Noted! ✍

[@pritamgain9504]

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

[@olivierlarose1]

Nice!🔥

[@aritrasarkar9374]

Another great video by oliver

[@olivierlarose1]

Thank you🙏

[@istvantibortoth8395]

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

[@olivierlarose1]

Cheers!

[@user-ii7xc1ry3x]

Olivier, you little genius.

[@olivierlarose1]

😂thanks

[@khaledx30ify]

always great topics never disappoint thanks brother

[@olivierlarose1]

Thanks for the support as always bro🙏

[@theBarracuda_]

bro, i had to create a yt playlist to save your vids. Your content is goated

[@akashctd03]

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

[@olivierlarose1]

My pleasure🤝

[@soyelchicodelanus8471]

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

[@olivierlarose1]

🤝my pleasure

[@darkrager2000]

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

[@olivierlarose1]

Cheers🤝

[@ramin9134]

amazing as always 👌

[@olivierlarose1]

Cheers my friend🤝

Awesome, very inspiring !

[@olivierlarose1]

Cheers!

[@ruizxzx]

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

[@olivierlarose1]

Cheers👊

[@feastofsteven1214]

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.

[@rkcoder]

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

[@olivierlarose1]

If there’s more demand for it I’ll definitely do it! Thanks for the suggestion 🙏

[@imransefat8770]

+1 for tailwind

[@jatiquep5543]

Tailwind would be nice.... It would make things much easier to understand

[@ilmanmanarulqori5632]

Nowaaaaaaay here we go again 🎉🎉🎉🎉

[@olivierlarose1]

🔥🔥

[@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 ?

[@mmaarafat]

Hi, bro. You are doing really great 👍

[@olivierlarose1]

Cheers👊

[@fortunebolt]

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

[@flash1944]

I'd like to know the same thing...and if so...how?

[@K조셉]

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 .

[@instaquirk]

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

[@jssecrets]

Thank you! Olivier could you please take at your Discord? I have a small issue with this.

[@Diego_Cabrera]

Great video!

[@olivierlarose1]

Thx bro👊

[@leonardoalves6356]

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

[@sebosamuraj]

Nice job Bro :)

[@olivierlarose1]

Thanks :)

[@yukendhiran8043]

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

[@Daddasoft]

always creative 😎😎

[@olivierlarose1]

Let’s goo🔥

[@hassaantahir3861]

Quality content... 🔥

[@olivierlarose1]

Let’s goo🔥

[@FelipeChaves-wz4gp]

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

[@ryuske_edits]

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.

[@Sviatoslav-wv3qy]

I am not Oli, but you can try to make basically 2 identical pages with the content on the same place and use this effect to reveal a hidden content. Or use this effect only on the sections you need. So you will have something like: export function MaskComponent({hiddenContent, displayedContent}: {hiddenContent: ReactNode, displayedContent: ReactNode}) { {hiddenContent} {displayedContent} } And it doesnt matter how many paragraphs you have in the divs itself, it will reveal the hidden content anyway. Just make sure that they have +- the same size and markdown(position)

[@RahulSingh-wb3ne]

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

[@olivierlarose1]

Good question! I know some people have integrated some of my animations inside Framer apps but personally I have no idea how to do that

[@majoralter]

Great video

[@olivierlarose1]

Thanks!

[@ziacodes]

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?

[@olivierlarose1]

His website is really nice it would be hard work but I'll definitely remake it if I get more requests for it :)

[@chokdeesam2365]

You have one more request :) we are many peoples ❤

[@olivierlarose1]

I hear you!

[@ziacodes]

Thanks @@chokdeesam2365 Now you need to make video 🙈 @olivierlarose1

[@neon-gi5tb]

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?

[@olivierlarose1]

It doesn’t exist in tailwind, but you can add some inline css in your jsx for the mask image property and it’ll work

[@tamerahmed9860]

Thank you!

[@olivierlarose1]

You're welcome!

[@voldemortvi4264]

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

[@olivierlarose1]

Thank you! Around 3-5 years, but it was scattered around many spheres of programming. If you focus solely on React and Front End I believe you can achieve this level within a year. Enjoy!

[@julienheng3880]

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

[@Danielhenriquejesusdepaiva]

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

[@varunKT001]

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.

[@olivierlarose1]

Try to put the cursor in position fixed

[@labibnoob4732]

@@olivierlarose1 how Please alot of people stucked

[@samuelosei729]

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

[@olivierlarose1]

Practice makes perfect💯

[@جوادجیتی]

i love it

[@olivierlarose1]

🤝

[@matiasgigena1912]

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

[@olivierlarose1]

Hey absolutely! I'm waiting on a bug fix for exit animations in Next 13 and I will do just that. Stay tuned!

[@nihil_um]

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

[@moizahmed1898]

same

[@NomanAli-zd1bn]

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

[@Faisal-np7qi]

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?

[@olivierlarose1]

Thanks for the support🙏 for ScrollTrigger, you could try to use the refresh() function to re-calculate or the immediateRender property. Hope that helps :)

[@Faisal-np7qi]

@@olivierlarose1 sounds good)) will we be seeing a new video soon? ^^

[@olivierlarose1]

I will release one tomorrow! You can also check my blog, I usually put the animation there before. Enjoy :)

[@Faisal-np7qi]

@@olivierlarose1 cant wait!

[@جعفرمحمد-ز8ت4ح]

oh my god

[@olivierlarose1]

🔥

[@araWINd-niqqa]

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

[@araWINd-niqqa]

can i keep the mask only to the container rather than the whole screen?

[@jheanbrizadao2429]

[@heeyfre4141]

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!

[@olivierlarose1]

There’s a lot of ways to do it. I would for sure leave wordpress for now because it’s going to limit you creativity wise. If you already have a good HTML and CSS base then I would jump in React and it’s going to deepen your understanding of JS at the same time. After you understand the basics of React then go for libraries like GSAP and Framer Motion, you can follow my videos it’s a good exploration of that and then try to make your own portfolio with your own creative animations. Then you can venture in webGL and you should be good to go.

[@heeyfre4141]

@@olivierlarose1 thank you for your answer. What do you think about trying to learn nextjs directly, instead of react. If you have any good online resource that would be really appreciated not only animations realted but also to give me an idea on how to deliver a project from start to finish. Your channel is one of a kind when it comes to cover this cool animations.

[@olivierlarose1]

@heeyfre4141 I suggest you start with vanilla React first then you’ll understand the pros and cons of using NextJs and other frameworks. For your first shipped website I would do it in Nextjs tho it’s going to be much easier for you since Vercel is super user friendly. But practice the basics of React first then go in Nextjs or any other frameworks for a released project

[@Yourboss30]

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

[@olivierlarose1]

You can with webflow I believe, but you’ll still want to add custom code for effects like this

[@Muhy_nz]

can you make tutorial make hover effect like 0:08

[@olivierlarose1]

Okk I hear you!

[@جوادجیتی]

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

[@olivierlarose1]

Yes if there’s more interest for it I will rebuild it!

[@جوادجیتی]

@@olivierlarose1 thanks a lot , build a multipage website with aswome animation to gether with a page transition and maybe use react three fiber or threejs without any libary

[@joshuadodofoli6298]

How do you know all these things?

[@olivierlarose1]

Time!

[@nesmanpro]

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

[@misterrkuentin]

Yes, I know that it’s a workaround, but it works fine with the older version of framer-motion (10.14.0) and the newest Next.js 14.3

[@joshbillion6874]

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.

[@olivierlarose1]

Join the react train my friend 🚂 but you can do the same using querySelectors, mouse move events and the gsap.to function. Best of luck!

[@alizaib.1]

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

[@olivierlarose1]

I'm not sure I understand your question :)

[@alizaib.1]

@@olivierlarose1 I am asking that if we need to use this animation couple of times in our website than how can we do this

[@alizaib.1]

@@olivierlarose1 Can you please create a vedio on this

[@alizaib.1]

@@olivierlarose1 Like using context hook or redux etc .

[@olivierlarose1]

Gotcha! I’ll add it to my list and put out a video for this, stay tuned

[@richardpickman5574]

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

[@olivierlarose1]

😅working on it

[@Mirislomovmirjalol]

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

[@olivierlarose1]

Good question! I think it’s more of a design choice not really a technical problem

[@MaxKostenko-o6q]

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

[@olivierlarose1]

Haha I will😂

[@rayhankessal6976]

👌🤔

[@olivierlarose1]

🤝🔥

[@learncode5110]

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

[@olivierlarose1]

I usually speed up the parts I feel are not relevant to the animation, but thanks for your feedback🤝

[@learncode5110]

@@olivierlarose1 Okay!