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!
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.
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..
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
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?!
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 TH-cam. It would probably be the most viewed tutorial regarding framer-motion on TH-cam. Keep up the great work!
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?
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!
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
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.
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 ?
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.
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)
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 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 .
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
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
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?
Thanks for the support🙏 for ScrollTrigger, you could try to use the refresh() function to re-calculate or the immediateRender property. Hope that helps :)
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!
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.
@@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.
@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
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 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
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!
Hey Minh! Love your work, that's a super well designed website, I enjoyed remaking it.
Love your videos btw! Keep it up
Awesome design! I saw your original video
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.
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..
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
thanks man
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?!
@@zacmuturi4522 Add me to that list.
I love the video style! The seemingly perfect audio transitions and no slow typing it out! It's great! Thank you!
Thanks happy to hear that!
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 🙏
Noted! ✍
How can I be like you. I’m overwhelmed tbh. Simple, but creative. I love your skills ❤
Practice makes perfect💯
Broo that is so sick, I recently started coding in JS and theses kinds of videos are so inspiring. Keep up the work bro!
Nice keep going bro👊
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 TH-cam. It would probably be the most viewed tutorial regarding framer-motion on TH-cam. Keep up the great work!
amazing :) learning framer motion and learning alot from your tutorials. thank you so much olivier 🙏
My pleasure🤝
Bro you are killing it ! Hacking all awwwards resources xD. Keep it going bro 🙌🙌🙌
😂gotta reveal all the secrets! Thanks for the support🤝
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 👍.
Cheers!
Wow, bro this is both cool and incredibly helpful, tq for making such awesome videos 🙏
My pleasure🤝
perfect video for what I was looking for past couple of days... :)
Nice!🔥
Super content bro, i learn new things by watching your every video. Keep rocking bro 😊
Cheers🤝
These are awesome! could you please make some of this kind of stuff using tailwind too?
If there’s more demand for it I’ll definitely do it! Thanks for the suggestion 🙏
+1 for tailwind
Tailwind would be nice.... It would make things much easier to understand
always great topics never disappoint thanks brother
Thanks for the support as always bro🙏
this guy is crazy! I love it! gracias!!
🤝my pleasure
Another great video by oliver
Thank you🙏
niceee one broo...checked this few days ago on your website demos
Cheers👊
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?
His website is really nice it would be hard work but I'll definitely remake it if I get more requests for it :)
You have one more request :) we are many peoples ❤
I hear you!
Thanks @@chokdeesam2365
Now you need to make video 🙈 @olivierlarose1
Awesome, very inspiring !
Cheers!
amazing as always 👌
Cheers my friend🤝
Hi, bro. You are doing really great 👍
Cheers👊
Thank you!
You're welcome!
Olivier, you little genius.
😂thanks
Nowaaaaaaay here we go again 🎉🎉🎉🎉
🔥🔥
Great video!
Thx bro👊
Obrigado ai amigo ótimo video continue postando video de framer-motion ou até quem sabe voce possa fazer videos de three.js tbm valeu
+Sub , simple and clean explaining & directly to the point , may i ask how long did take you to obtain this level of knowledge :D ?
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!
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
Hey absolutely! I'm waiting on a bug fix for exit animations in Next 13 and I will do just that. Stay tuned!
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.
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 ?
This is nice!! Can this be used as a code override in framer?
I'd like to know the same thing...and if so...how?
Great video
Thanks!
always creative 😎😎
Let’s goo🔥
Loving it! thanks a ton for this tutorial
Also is there a way to use this directly on Framer app?
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
Quality content... 🔥
Let’s goo🔥
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.
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)
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 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 .
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
i love it
🤝
Nice job Bro :)
Thanks :)
oh my god
🔥
Amazing video!! I just want to know how can I update the x and y position when I scroll as well?
You're so so good man!! How do you think of such solutions?
Practice makes perfect💯
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
can i keep the mask only to the container
rather than the whole screen?
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?
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
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?
Thanks for the support🙏 for ScrollTrigger, you could try to use the refresh() function to re-calculate or the immediateRender property. Hope that helps :)
@@olivierlarose1 sounds good)) will we be seeing a new video soon? ^^
I will release one tomorrow! You can also check my blog, I usually put the animation there before. Enjoy :)
@@olivierlarose1 cant wait!
In next 14 I'm using your exact code but the mouse animation is laggy. Any solution?
Thumbnail is cringe, but content is great! Keep going, quality of the videos is sick!
😅working on it
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!
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.
@@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.
@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
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.
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!
When i open devtools (in any browser), the animation doesn´t look smooth. Is this happening only to me?.
same
my cursor is pretty laggy ... do you happen to know why?
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.
Try to put the cursor in position fixed
@@olivierlarose1 how Please alot of people stucked
I am trying to create this with only Javascript but failed can anyone help me 😢
I think u can rest sometimes, u already have so much content, man xD
Haha I will😂
why this kind of things very easy to do but a lot of websites dont do it?
Good question! I think it’s more of a design choice not really a technical problem
anybody else's mouse animation is lagging as hell with framer motion?
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
👌🤔
🤝🔥
can you make tutorial make hover effect like 0:08
Okk I hear you!
can you clone website you show first in a play list ?
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
IS THERE ANY WAY WE CAN MAKE THIS KINDA WEBSITE USING NO CODE OR IT IS NOT POSSIBLE YET
You can with webflow I believe, but you’ll still want to add custom code for effects like this
How do you know all these things?
Time!
and for the no. of components ?
what can we do
I'm not sure I understand your question :)
@@olivierlarose1 I am asking that if we need to use this animation couple of times in our website than how can we do this
@@olivierlarose1 Can you please create a vedio on this
@@olivierlarose1 Like using context hook or redux etc .
Gotcha! I’ll add it to my list and put out a video for this, stay tuned
Amazing but its a suggestion please do not start with speed do step by step with coding explaination
I usually speed up the parts I feel are not relevant to the animation, but thanks for your feedback🤝
@@olivierlarose1 Okay!