Rebuild an Awwwards Side Menu with Framer Motion and Nextjs

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ม.ค. 2025

ความคิดเห็น •

  • @infernus0077
    @infernus0077 ปีที่แล้ว +1

    Yet another banger, i was looking for some TH-camr with in-depth framer motion tutorials glad i discovered you , I also used the awwards menu from code with Dennis for portfolio, so thx a ton , looking forward to your next vid

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Nice! Glad you like the videos

    • @HealthWealth-sp5yr
      @HealthWealth-sp5yr 10 หลายเดือนก่อน

      @@olivierlarose1 Hey Olivier , i am trying to find the perspective animation video that you had mentioned but it is nowhere to be found , Could you please help me find your video ?

  • @strangertongues
    @strangertongues ปีที่แล้ว

    Thanks Olivier, great video as always. The uncut "so yeah, that was the menu" at the end gave me a laugh, like a little behind the scenes.

  • @devlog_lemba
    @devlog_lemba 7 หลายเดือนก่อน

    He explained every details with a clean thought process

  • @Mirzaisha11
    @Mirzaisha11 ปีที่แล้ว

    Great Video! loved it. Thanks for the text animations. and nav as well but I really loved Text animations.

  • @apexdigital.studio
    @apexdigital.studio 8 หลายเดือนก่อน

    why this channel so underrated??! keep bringing the good stuff, man! thank you for this.

  • @xgiha
    @xgiha ปีที่แล้ว

    this guy deserve youtube play button sooner for these great tutorials

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Respect bro! Appreciate the support

  • @Way_Of_The_Light
    @Way_Of_The_Light ปีที่แล้ว

    I’m addicted to your tutorials 🙏🙏

  • @shahjahansarfraz9598
    @shahjahansarfraz9598 ปีที่แล้ว

    Another addition to rare content on yt. keep it up man, love your videos ❤️

  • @sergenorin
    @sergenorin ปีที่แล้ว +1

    Yet again... from one masterpiece to another🔥🔥🔥

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Thank you my friend you’re making my day!

  • @kamill34
    @kamill34 ปีที่แล้ว

    Oliver, in another video, you discussed persisting animations. For this, Next.js has a template file, which is perfect for these kinds of animations. Despite, great video !

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 7 หลายเดือนก่อน

    THanks for the value you give

  • @parmdhillon
    @parmdhillon 8 หลายเดือนก่อน

    Thanks Olivier for this masterpiece

  • @brianruizy
    @brianruizy 8 หลายเดือนก่อน

    Super clean thanks for the Tut 😄

  • @chokdeesam2365
    @chokdeesam2365 ปีที่แล้ว

    Je me disais bien que tu avais un accent familier :)
    Merci d'avance pour cette videéo que j'ai à peine commencé.

  • @ladaonmymind
    @ladaonmymind ปีที่แล้ว

    Amazing content! Thanks a lot. Going to play with the text and make it pop up when I hover over it. Hopefully I am going to get it done.
    By the way, I noticed that you have the href for the links in de motion.div, did you mean to put in the a tag? Anyways, please keep making content and I believe your channel will go far! :)

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Yes a little mistake haha but thanks for the support!

  • @yangdongjun
    @yangdongjun 8 หลายเดือนก่อน

    Great tutorial! thanks bro

  • @mateuspaula_dev
    @mateuspaula_dev ปีที่แล้ว

    Thanks a million broh, you are a true legend!!

  • @pulinduvinnath1812
    @pulinduvinnath1812 ปีที่แล้ว

    Great tutorial, Thank You 🔥🔥🔥

  • @paulab9310
    @paulab9310 7 หลายเดือนก่อน

    It's a great tutorial but having to adapt this to an older React project built with Express is a bit complicated. I've figured how to add scss to the components but it doesn't seem to work and I don't want to start this project all over since is a rather large e-commerce app. I imagine it's quite easy to apply what you are teaching us here to a NEXT or NUXT with Vue project. I like SCSS and I appreciate you still want to use it when so many developers went the Tailwind route.

  • @TheGamer-uv7yd
    @TheGamer-uv7yd 2 หลายเดือนก่อน

    26:22 - So Yeah x4

  • @mazwrld
    @mazwrld ปีที่แล้ว

    can wait to go home and watch this

  • @Stephinmaju
    @Stephinmaju ปีที่แล้ว

    Rocking 👏👏🎉 but I want to zoom your screen because I struggle to see that😅

  • @websternavarro9211
    @websternavarro9211 2 หลายเดือนก่อน

    i want to make a logo on the left but when I did the div keeps expanding when I open my button, how can I fix it?

  • @ramin9134
    @ramin9134 ปีที่แล้ว

    amazing as always😍😍

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Thank you for the support my friend!

  • @tosinakerele2937
    @tosinakerele2937 7 หลายเดือนก่อน

    you are just amazing.

  • @nellymotion
    @nellymotion ปีที่แล้ว

    Woow, really nice tutorial 🔥🔥🔥

  • @Omohagbon
    @Omohagbon ปีที่แล้ว +4

    It just shows how far behind I am😞

  • @akeeb3715
    @akeeb3715 5 หลายเดือนก่อน

    My links were sliding in from the right, then I tried to refer the source code. but that was totally unrelated from except the Button Component. Please provide the source code of this video @Olivier

  • @y0ake77
    @y0ake77 9 หลายเดือนก่อน

    Why you don't use tailwind?

  • @Diego_Cabrera
    @Diego_Cabrera ปีที่แล้ว

    Love it man!

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Cheers! Keep going with your own content

  • @rohansr6837
    @rohansr6837 ปีที่แล้ว +1

    Bro, can you make some video on page some sick transitions during navigation. There not much video on that. It'd be very helpful.

    • @edojoshua
      @edojoshua ปีที่แล้ว

      that'd be really cool, and page loaders as well

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Noted!

  • @muhammadalfaris100
    @muhammadalfaris100 ปีที่แล้ว

    Love tutorial

  • @rusdiahamid
    @rusdiahamid ปีที่แล้ว

    thanks bro, its amazing 🔥🔥🔥🔥🔥

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      Nice! Glad you liked it

    • @rusdiahamid
      @rusdiahamid ปีที่แล้ว +1

      @@olivierlarose1 Hi Oli, your video really inspired me. Can I upload video that i learn following your instructions?

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      @@rusdiahamid of course!

    • @rusdiahamid
      @rusdiahamid ปีที่แล้ว

      @@olivierlarose1 thanks bro 🔥🔥

  • @CartierKray
    @CartierKray ปีที่แล้ว

    Hey Bro FIREE Content, looked at your Blog, would love to learn from you the 3D Perspective Scroll Effect tutorial!, will you put it online?

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      It will be released inside my upcoming course

    • @CartierKray
      @CartierKray ปีที่แล้ว

      Im from holland Amsterdam, will i be able to pay for it? And when are you aprox. Releasing it? Blessupp bro good work 💪🏾

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      @@CartierKray of course! Not sure exactly when I'll be releasing, probably in a couple of months!

  • @nomanebenyshahid7435
    @nomanebenyshahid7435 ปีที่แล้ว

    Thank you 💥

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 ปีที่แล้ว

    lets goooooooo 🎉

  • @k40L1n
    @k40L1n ปีที่แล้ว

    Absolute gangsta!

  • @thegr8binil
    @thegr8binil ปีที่แล้ว

    Cool ! Can you do the styling with tailwind css

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +2

      I'm still on the fence about jumping to tailwind, I'm unsure if it's appropriate for creative / experimental websites

    • @thegr8binil
      @thegr8binil ปีที่แล้ว

      Have a try @@olivierlarose1

  • @safkatsadli1374
    @safkatsadli1374 ปีที่แล้ว

    How can i do this in react?

  • @dipongkorroydipu1613
    @dipongkorroydipu1613 ปีที่แล้ว

    Awsome bro🙏,You should make a nextjs full project and also next14 series beginner to advance 🙋‍♂️🙏

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      For sure! Thanks for the suggestion

  • @seekknowledge1928
    @seekknowledge1928 ปีที่แล้ว

    Bro you always rock

  • @kuipid
    @kuipid ปีที่แล้ว

    Too good

  • @learnityourself
    @learnityourself ปีที่แล้ว

    Sublime stuff

  • @cjstronger
    @cjstronger 7 หลายเดือนก่อน

    I’m so lost on how he has an event handler (on click) in a server component…

    • @olivierlarose1
      @olivierlarose1  7 หลายเดือนก่อน

      Since I use a state to open and close the menu, I use the “use client” directive so it’s a client component now not a server component

  • @VarunBhole
    @VarunBhole 13 วันที่ผ่านมา

    why is it not mobile responsive

  • @atulkadyan1303
    @atulkadyan1303 ปีที่แล้ว

    brother your work is awesome but i am new to web industry and i want to create awwwards level websites can you give me what should i learn as for now i know html,css and little js

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Make sure you can re create any designs with basic html and css. Then become a master of vanilla javascript, then learn React (or Vue.js) and then learn Next js or Nuxt js

    • @atulkadyan1303
      @atulkadyan1303 ปีที่แล้ว

      @@olivierlarose1 thanks will be following this path and can you also create these animations in normal html,css and js i mean not using next.js?

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      @@atulkadyan1303 Yes Next.js is not necessary for animations. It's just a modern framework that I like to use

    • @atulkadyan1303
      @atulkadyan1303 ปีที่แล้ว

      @@olivierlarose1bro i want to create that svg line animation using gsap or any other js lib other than any framework

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      @@atulkadyan1303 sure go for it. You can do it with vanilla html, css and javascript

  • @alexg7282
    @alexg7282 ปีที่แล้ว

    Nice !

  • @maisoncastro
    @maisoncastro ปีที่แล้ว

    This is some dope shit bruh

  • @ziontutorial
    @ziontutorial ปีที่แล้ว

    omg what i found today 😲😲😲😲😲😲😲😲

  • @itx_vibhu
    @itx_vibhu 7 หลายเดือนก่อน

    11:42

  • @kadekmegaputra9248
    @kadekmegaputra9248 ปีที่แล้ว

    Are u allien? you are so smart..

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Thanks but unfortunately I’m just human!

  • @unknown.6914
    @unknown.6914 6 หลายเดือนก่อน

    not easy