Discovered your channel today and already watched 3+ hours of your content. Great stuff man! I love how you dive into the logic of how the animations work and actually teach how to recreate and tweak it ourselves instead of just speeding through the implementation. I would love to see more content about how to handle Mobile first design for creative components like this. Often times these websites look great on desktop, but they either break completely on mobile, or are so heavy the performance hit makes them unusable. Would appreciate a follow-up series where you take the existing components you've already built and do a mobile-first approach. Golden content man, keep it up!
Bro this video that you've made is ig the best video of yours. This is the video in which you've shown the step by step guide and showed where is what. In the other few videos that have a duration of 6-7 mins, It was quiet frustrating to figure where is what and would break my concentration. You do have everything mentioned on your personal site and github, but a better video explanation was what I wanted and this video serves it all. I loved this video of yours. Awesome efforts!!!!! It's been a couple of months I've been wondering bout how dennis made this part on his portfolio, but man your just had my back. Thanks again for yours efforts, Love your content. You're Awesome.
Such a nice animation it is but it has a issue, The implementation of pointer-events: none; prevents any user interaction with the 'view' button, rendering it non-responsive. and if we remove the pointer-events: none; property animation becomes glicthed, any fix to it?
@@rockylikespocky Omg your a life safer. I actually got to the point of doing this effect with plain JavaScript before I found this Video. But I ran into this issue of not being able to click - such a simple solution that I somehow never thought of!
Awesome work man! I'm having trouble clicking a link because it has pointer-events: none applied in the CSS. Is there a way to still activate the link?
I've tried using only framer-motion for this. I used useSpring to animate the Modal when moving the cursor, and it works fine if you're not scrolling. But if you're scrolling then useSpring starts to jutter, it waits until the scroll is over and then moves the modal. If I remove useSpring and just use clientX and clientY values without any spring effect, everything works fine even when scrolling. If anyone has any idea what might be wrong let me know.
In theory, you’d want to stick with one or the other, just so your app is more coherent and homogeneous. But for a small project like a personal portfolio, I don’t see the issue with using both.
Why does this guy have only 600 subscribers?? You deserve more! I love these videos! Don't stop making them!!
🔥Appreciate it!
Never stop making these videos, man. This is GOLD!
Appreciated🔥
Discovered your channel today and already watched 3+ hours of your content. Great stuff man! I love how you dive into the logic of how the animations work and actually teach how to recreate and tweak it ourselves instead of just speeding through the implementation. I would love to see more content about how to handle Mobile first design for creative components like this. Often times these websites look great on desktop, but they either break completely on mobile, or are so heavy the performance hit makes them unusable. Would appreciate a follow-up series where you take the existing components you've already built and do a mobile-first approach. Golden content man, keep it up!
Bro this video that you've made is ig the best video of yours. This is the video in which you've shown the step by step guide and showed where is what. In the other few videos that have a duration of 6-7 mins, It was quiet frustrating to figure where is what and would break my concentration. You do have everything mentioned on your personal site and github, but a better video explanation was what I wanted and this video serves it all. I loved this video of yours. Awesome efforts!!!!!
It's been a couple of months I've been wondering bout how dennis made this part on his portfolio, but man your just had my back. Thanks again for yours efforts, Love your content. You're Awesome.
Sounds good I appreciate the feedback💯
Men , you my legend , thanks for all this premium animation
Respect👊
It's awesome! I literally have no words. You're an example for me that everybody can learn and do such a great animations. Big thanks for your work!
Glad it inspired you!
Impressive to watch you work through that. This convinced me to use more CSS transitions!
Thank you very much for your excellent animation tutorials. I learned a lot and it's clear.👍
I've been looking for this one for ages....Thanks dude! Keep going 💪
Nice 🔥
YOU'RE SO EFFING UNDERRATED MAN!!!!
🤝respect
wow! today I found your channel...its amazing what you are doing!
Thank you!
Rock solid tutorial man, keep it going!!
Thanks man🔥
Awesome work man!
Thanks!
Such a nice animation it is but it has a issue, The implementation of pointer-events: none; prevents any user interaction with the 'view' button, rendering it non-responsive. and if we remove the pointer-events: none; property animation becomes glicthed, any fix to it?
If you’re referring to the ability to click the link, don’t put the link click event on the View button but rather on the project element itself.
@@rockylikespocky Omg your a life safer. I actually got to the point of doing this effect with plain JavaScript before I found this Video. But I ran into this issue of not being able to click - such a simple solution that I somehow never thought of!
Love these videos! Thanks
My pleasure🤝
Stunning video 🔥🔥
I appreciate it!🔥
You are just great
Love these videos!
Cheers👊🏻
Awesome work man! I'm having trouble clicking a link because it has pointer-events: none applied in the CSS. Is there a way to still activate the link?
Love your content❤
Thank you!
Hey hey new to dev here but I do a lot of UX/UI work. I was wondering could these same concepts be applied to framer?
you are gem man
Hi Mouse move part is not working for me. next js 14
I've tried using only framer-motion for this. I used useSpring to animate the Modal when moving the cursor, and it works fine if you're not scrolling. But if you're scrolling then useSpring starts to jutter, it waits until the scroll is over and then moves the modal.
If I remove useSpring and just use clientX and clientY values without any spring effect, everything works fine even when scrolling. If anyone has any idea what might be wrong let me know.
Great video! Do you know a good Next.js tutorial?
hey i got it to work but i just have an issue the pointer is not centered in the modal any idea why?
Do you take in account the width and height of the modal? Not sure but It might be that
Please continue the html css javascript gsap awwwards winning animation series ❤ please 🥺
Sure thing🔥
You explain it so well, definitely one of the best ones on YT. Keep it up!
@@CommunityAllSeasons Nice🔥
Can you show us how it would be for small screen sizes like mobiles and tablets
hey buddy, could we make these clickable, like we already have the hover effect but i wanted it to be an a div ...
Not exactly sure what you mean, but you could add a click event or a link to another page in Project component.
@@olivierlarose1yes bro, i wanted to make a whole line be clickable so in Project component, i just have to put all the div in an 'a' tag?
@@MinhNguyen-vh9sv exactly, just wrap the div with an ‘a’ or a ‘next/link’
@@olivierlarose1 oki tks bro ❤️
@@olivierlarose1 since you made the cursor and cursorlabel having pointer-events set to none how will I able to make it clickable ??
Is it possible to do this within framer?
how performant is to use Framer motion AND gsap?
In theory, you’d want to stick with one or the other, just so your app is more coherent and homogeneous. But for a small project like a personal portfolio, I don’t see the issue with using both.
I need the same using reactjs🙄🙄
You can! Next.js is built on top of react and for this animation specifically it’s going to be the same
How would these animations be like in Mobile view