Hey. Awesome video. I have watched so many of yours. You explain things really well. I just have one small suggestion. In your videos, you use index.js in multiple subfolders. Is there a reason behind it? I feel it would be much clearer if you use proper names for each files. Keep creating cool videos like this!!!
Hey! Really enjoy your content, really HQ! I Would like to see more content like that from Awwwards, they really inspire me in my journey to be full stack junior, I would like to see React too and its really interntsting how to achive high quality design in motion with react :) So thanks I Just Subscribed, and waiting for your next video! :)
Hello, first of all, thank you very much, an excellent video and the functionality is incredible, I only have a small problem that when I make a link in the menu (that is, to the pages) it remains completely open (it does not close as it does when clicking click on the X), please guide me to solve this. Thank you.
That's an elegant and professional menu right there! I'd like to try it! I've never used sass or nextjs before but I'd like to give it a try and if you give me a hint to make this layout responsive I will appreciate it! Thanks!
you can pass a prop called 'custom' to the motion component just like he did. The value that you passed into that 'custom' prop can then be accessed in the variants object, but you have to turn that variant which needs access to the 'custom' prop into a function. He accessed the 'custom' prop with the word: 'i'
Olivier, I need your help, making this menu, I dont know why it is behind all in the page, I tried changing its zindex but it does not work! Do you know what could i do?
Hey Oli, nice video! I implemented the same navigation to my page. Do you have an idea how to toggle the side menu on click on the navigation link or by clicking outside of the sidemenu?
really cool work, i love it on the same website, could you try to re-create the final effect? after the projects presented, we come to the footer on the site at the scroll before the footer, a section is first rounded, then becomes straight with the scroll and reveals the footer
Hi, Could you please create a video on shared element transition between two pages? One way i know is using layoutId from framer motion but i couldn't customize it Assume page 1 has 1 image on left side and 2 page has the same image but on the right side When navigated to page 2 from page one the image should slide to left Please create this video, there's no video on RUclips about it. Thanks this was a super cool video ❤
For sure! The exit animations for page transitions are broken in Next13 right now tho so I'm waiting for a bug fix and I'm releasing multiple videos on the subject. Go and upvote the issue! github.com/vercel/next.js/issues/49279
its so hard or it just me can u continue this series with tailwindcss and a little slow pace explaining everything so that we can understand the concepts how everything is working
amazing tutorial but how do i make it close once i click a link, like i need to change 'isActive' state right but the link component is else where, do i need to use something like redux to do that?
@@minibox389 what i did is, when a link is clicked in nav, it passes a props to the header index.jsx and change the state of isActive, and it works as intended, idk if its the most efficient way to do so
Agreed. But where did you import this svg?? Like where did you locate this?? you showed the location of this SVG in the inspect, but how did you get it there?? @oliverlarose1
Thank you so much @@olivierlarose1, I just found my mistake and learned from your code. You're very supportive and an very nice guy. Thanks once again.
Hey I totally understand! I’m trying my best to find a middle ground for all skill level. If it can help you, I made a written version of this tutorial, you can take your time to understand it: blog.olivierlarose.com/tutorials/curved-menu
When I first saw this video a few weeks ago, I had the same thoughts. However, I spent over a weeks to properly understand the basics of svg oath and how changing the values effect the svg itself. Now when I see this again, its like a breeze. I guess the idea is to give you a hint in the right direction and then you can take it up yourself, break it into smaller pieces and then understand it in a much better way.
Wow, rebuilding Awwwards stuff is insane content!
Haha indeed🔥
Yeaaaah keep going this series @oliverlarose1
Let’s go🔥
Wow! Just what I need. Thanks for creating this.
I was going mad about exit animation not working , then got to know about animate presence thankyou!
So glad i stumbled on this channel. These are excellent tutorials man, keep it up!
Appreciate it🙏
bruhh never seen a youtuber showing such builds...im a web developer too currently in high school but want to work with it in the future!
Let’s go🔥
Awesome as always Olivier. These videos are gold!
i just discovered your channel and visited your blog , you are awesome Oliver!!
Thanks glad you liked the content🤝
Awesome tutorial. I needed this.
Just subscribed!
Keep doing this and upload regularly, You will create huge audience around you. Good Luck
Appreciate it!🤝
Hey. Awesome video. I have watched so many of yours. You explain things really well. I just have one small suggestion. In your videos, you use index.js in multiple subfolders. Is there a reason behind it? I feel it would be much clearer if you use proper names for each files. Keep creating cool videos like this!!!
thank you olivier for your amazing tutorial :) would like to see more framer motion content in the future
Will do! Thanks for tuning it.
I don't think I'll ever understand svgs path logic, you make it look so easy 😅
😂I feel you. Very confusing at first haha
You just keep on knocking it out of the part every time!
Do you have some sort of Patreon or something where I can support you directly?
Thanks, I appreciate it! I don’t have a patreon right now but your comments are enough to support me trust🔥
super duper awesome content.
Should be millions of subscriber.
Thanks! I appreciate it
I turned on 🔔 notifications about 1 minute into this video.
Let’s gooo
That was pretty clean! Subscribed!
Cheers🤝
You are doing amazing job Olivier
Thank you :)
Amazing. Keep it up. Looking forward
Thank you🤝
great work bro
Thanks bro👊
Bro the staggered menu animation you created in like 2 secs took me forever to make 😭
Keep practicing bro you’ll get better🔥
@@olivierlarose1 will do! I’m planning to drop a course on my yt for this amazing library. Btw keep creating this amazing content!
@Diego_Cabrera Let’s gooo🔥
Hey! Really enjoy your content, really HQ! I Would like to see more content like that from Awwwards, they really inspire me in my journey to be full stack junior, I would like to see React too and its really interntsting how to achive high quality design in motion with react :) So thanks I Just Subscribed, and waiting for your next video! :)
Absolutely I’m glad to hear that!
you are amazing man, thanks for these videos
Thanks!🤝
Great videos man, just subscribed and notifies enabled!
I appreciate it!👊
@@olivierlarose1what's your job?
@@Mar-kb8yq I'm a freelance dev
Thank you so much for this tutorial Oliver... I really wanna know how to toggle the menu ( close ) when I click it out side of it ?
Great work man!
Thank you🤝
Nice man. Nice video. Subbed instantly
Cheers!
Hello, first of all, thank you very much, an excellent video and the functionality is incredible, I only have a small problem that when I make a link in the menu (that is, to the pages) it remains completely open (it does not close as it does when clicking click on the X), please guide me to solve this. Thank you.
Bro your content is 💯🔥
Appreciate it🔥
you are the best my friend 🤩🤩🤩
Glad to hear it helped you!
thank you so much for these great tutorials! I would like you to teach us effects with webgl or three js
It’s coming soon, a couple more weeks of framer motion and gsap and after that I have a list of 3d animations I’ll show you guys
Amazing tuto thx
That's an elegant and professional menu right there! I'd like to try it! I've never used sass or nextjs before but I'd like to give it a try and if you give me a hint to make this layout responsive I will appreciate it! Thanks!
Simply reduce the padding and font size for small screens and it should work fine :)
Great video🎉
Thank you!
Great work. 👍
Thank you🤝
The goat 🐐🔥
Appreciate it!
awesome man, thanks
This is great but u can use the useTransform provided by framermotion to achieve the same effect
Absolutely!
these videos are honest good work
🤝glad you like them
Thanks for sharing.
Cheers!
amazing
GOAT
🙏🤝appreciate it
nice , how can i organize all those files to be easy in next js for rendering and other thing in a project ?
You are the man!!
Respect👊
3:25 can you please explain how you used (i) part in anim.js for delayed animation
you can pass a prop called 'custom' to the motion component just like he did. The value that you passed into that 'custom' prop can then be accessed in the variants object, but you have to turn that variant which needs access to the 'custom' prop into a function. He accessed the 'custom' prop with the word: 'i'
Olivier, I need your help, making this menu, I dont know why it is behind all in the page, I tried changing its zindex but it does not work! Do you know what could i do?
Hey Oli, nice video! I implemented the same navigation to my page. Do you have an idea how to toggle the side menu on click on the navigation link or by clicking outside of the sidemenu?
Check out the library called “focus strap” if you want to make a robust menu
Thank a lot !
No problem :)
The pace is too fast for me but it's serious fun! ❤
Glad you enjoyed
awesome
Cheers!
really cool work, i love it
on the same website, could you try to re-create the final effect?
after the projects presented, we come to the footer on the site
at the scroll before the footer, a section is first rounded, then becomes straight with the scroll and reveals the footer
Sure! I’ll add it to my list no problem
Hi, Could you please create a video on shared element transition between two pages?
One way i know is using layoutId from framer motion but i couldn't customize it
Assume page 1 has 1 image on left side and 2 page has the same image but on the right side
When navigated to page 2 from page one the image should slide to left
Please create this video, there's no video on RUclips about it.
Thanks this was a super cool video ❤
For sure! The exit animations for page transitions are broken in Next13 right now tho so I'm waiting for a bug fix and I'm releasing multiple videos on the subject. Go and upvote the issue! github.com/vercel/next.js/issues/49279
Hi Oliver i like your tutorials but is it possible doing this design with just tailwind instead?
Yes I might!
Thank you
👊
You couldve used Vite+React insted of nextjs for quick demos. Otherwise great content
For sure!
Please use basic html, css and js for such videos. Not everyone uses frameworks to understand the twisted html syntax
A lot of other creators are doing basic html and css for such videos🤷♂️
its so hard or it just me can u continue this series with tailwindcss and a little slow pace explaining everything so that we can understand the concepts how everything is working
Noted✍️
amazing tutorial but how do i make it close once i click a link, like i need to change 'isActive' state right but the link component is else where, do i need to use something like redux to do that?
maybe you can make it close with useState on your link item like this onClick={() => setIsNavOpen(false)}
@@minibox389 what i did is, when a link is clicked in nav, it passes a props to the header index.jsx and change the state of isActive, and it works as intended, idk if its the most efficient way to do so
why not mobile optimized?
Did you learn all this on your own or at school? Any recommended online courses?
Learned it all by myself, unfortunately there’s a huge lack of online ressources for this type of stuff. Trying to slowly change that tho!
👌
👊
Can you explain where did you exactly put the svg in the file. I ain't able to use it. Thank you!
It’s not a file actually, it’s an with that has a custom “d” attribute
Agreed. But where did you import this svg?? Like where did you locate this?? you showed the location of this SVG in the inspect, but how did you get it there?? @oliverlarose1
Oh, it’s in the return function in the JSX
Check here for more details: blog.olivierlarose.com/tutorials/curved-menu
Thank you so much @@olivierlarose1, I just found my mistake and learned from your code. You're very supportive and an very nice guy. Thanks once again.
I noticed your framer motion animations are laggy on mobile
Yes it’s possible most of them are not mobile friendly. This curved menu tho is not laggy on mobile
1:27
why don't you give us the normal speed tutorial , why are you rushing? I don't understand the tutorial .So please upload tutorials in normal speed.
Hey I totally understand! I’m trying my best to find a middle ground for all skill level. If it can help you, I made a written version of this tutorial, you can take your time to understand it: blog.olivierlarose.com/tutorials/curved-menu
When I first saw this video a few weeks ago, I had the same thoughts.
However, I spent over a weeks to properly understand the basics of svg oath and how changing the values effect the svg itself.
Now when I see this again, its like a breeze. I guess the idea is to give you a hint in the right direction and then you can take it up yourself, break it into smaller pieces and then understand it in a much better way.
👌
👊