Build a Parallax Section Transition with React and Framer Motion

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 58

  • @edward-vonschondorf-dev
    @edward-vonschondorf-dev 4 месяца назад +8

    Between you and Tom is Loading, you guys are the best at explaining framer motion animations for me. Great video!

    • @abdelkarimelmanssouri9392
      @abdelkarimelmanssouri9392 4 месяца назад

      there is also frontend FYI that guy is one of the best at explaining framer motion.

    • @eduardocouto112
      @eduardocouto112 4 месяца назад

      Sam Selikoff is also great at teaching framer motion plus radix components

  • @kush8852
    @kush8852 4 месяца назад

    I love your content bro, i learnt animation from your videos and now I'm building my portfolio from this skills. I'll share my portfolio when it will complete.
    And thank u for these type of content.
    Love from India ❤

  • @SSan-n3q
    @SSan-n3q 4 месяца назад +1

    love it that you are using tailwindcss as well :) looking forward to your web animation course!

  • @nnikchikvaidze
    @nnikchikvaidze 4 месяца назад

    Amazing content! just found your channel and subscribed & saved video in playlist to watch later again, greetings from country of Georgia. keep it up!

  • @rvsdesk
    @rvsdesk 22 дня назад

    Hi Olivier, your videos are incredibly inspiring! I've always wanted to create websites using Three.js and WebGL, which led me to take Bruno Simon's Three.js course. As a designer with a foundation in HTML, CSS, and JavaScript, I realize there's still a lot for me to learn to reach the level needed for Three.js and WebGL projects. I'm feeling a bit lost and unsure of where to begin without overwhelming myself. Could you please guide me on how to start this journey effectively? Your advice would be greatly appreciated!

  • @CodeWithPhoenixx
    @CodeWithPhoenixx 4 дня назад

    what if I wanted it to rotate the other way round, let's say that was clockwise how about anti clockwise, the second section goes under the first.

  • @zukajeladze3975
    @zukajeladze3975 4 месяца назад

    I love your videos

  • @cbum3935
    @cbum3935 Месяц назад

    Hello sir first of all appreciate your effort u re amazing 👍🏻❤️
    I have a question sir here we have 2 sections now if i add section 3 and 4 i want when i scroll how 3rd section stop at top 0 just on scroll it moves further??

  • @mdsazzadhossainsiam6279
    @mdsazzadhossainsiam6279 Месяц назад

    What is that pb-[10vh] doing in the first section? some one please explain

  • @جوادجیتی
    @جوادجیتی 4 месяца назад

    please make a video about best performance and first loading in nextjs

  • @Ebokk
    @Ebokk 3 месяца назад

    GSAP or Framer Motion which one is at the top for you

  • @giggitygigs
    @giggitygigs День назад

    Thanks man

  • @kietletri7413
    @kietletri7413 4 месяца назад +1

    Just clicked the subscribe button, this guy is fantastic !

  • @Ivan-Shyriaiev
    @Ivan-Shyriaiev 4 месяца назад +1

    Thanks for the tutorial ! Definitely gonna use it on some of my projects 🎉🎉🎉

  • @shivkumar6374
    @shivkumar6374 4 месяца назад

    Great,
    I have question. How we do if we have more than 2 sections

    • @berad6034
      @berad6034 4 месяца назад

      duplicate one of the sections. set the parent container to h-[300vh]. repeat tutorial steps. voila

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 3 месяца назад

    THank you so much

  • @YacineBenziane-k6f
    @YacineBenziane-k6f 2 месяца назад

    What about smoothness in scrolling how did he do that?

    • @Solo_playz
      @Solo_playz Месяц назад

      Using lenis scroll library 🤝

  • @zillalsenmesrane1022
    @zillalsenmesrane1022 3 месяца назад

    Love You man

  • @shawn-skull
    @shawn-skull 4 месяца назад

    99% of programmers make tutorials with ugly examples cause they don't understand a fuck about design.
    This guy is a unicorn who combines such useful techniques with beautiful examples in efficient short videos.

  • @framerwme
    @framerwme 4 месяца назад

    Damn bro, amazing tutorial.
    I will replicate this animation straight in Framer. I'll make sure to mention you.

  • @randeeprana5622
    @randeeprana5622 2 месяца назад

    Good Share Olivier, I never thought that making a animated site can be that much easier. Thank for sharing Keep it up👏❣

  • @MystifulHD
    @MystifulHD 4 месяца назад

    do you think ai will be able to do this in the near future? i think yes unfortunately

    • @olivierlarose1
      @olivierlarose1  4 месяца назад +1

      Technically if you're able to describe the animation you want, the AI might be able to do it, but on the artistic side, I don't think it would be able to come up with creative animations

    • @MystifulHD
      @MystifulHD 4 месяца назад

      @@olivierlarose1 u think? =/

  • @mazwrld
    @mazwrld 4 месяца назад

    hey Oli, does the smooth scroll work fine for you with apple trackpad? every time I implement it based on your demos, the scroll behavior brakes

    • @olivierlarose1
      @olivierlarose1  4 месяца назад

      It works on chrome + macbook pro. Whats your gear and browser?

    • @mazwrld
      @mazwrld 4 месяца назад

      @@olivierlarose1 i’m using arc.. same thing happens on safari. basically only scroll down with the arrow keys

    • @olivierlarose1
      @olivierlarose1  4 месяца назад

      Works on safari from my side, not sure about arc I don't have it, but it should work as well.

    • @mazwrld
      @mazwrld 4 месяца назад

      @@olivierlarose1 sorry i guess i didn’t test properly but it does work ok safari but not on Arc. Not sure but why since it’s a chromium base browser. i’ll file a bug report with them. thanks tho.

  • @berad6034
    @berad6034 4 месяца назад

    Would love to see a video on Lenis, which I found in the source code

  • @ayoubdev8019
    @ayoubdev8019 4 месяца назад +4

    one of the most things i love about your content , is that u still using javaScript instead of TS, i really hate the fact that everyOne now is using TypeScript, anyways thanks for the video

    • @lasse-mo
      @lasse-mo 4 месяца назад +5

      I do think tho it's easier to turn a TS component into a JS component than the other way around.

    • @olivierlarose1
      @olivierlarose1  4 месяца назад +7

      I use Javascript for the simplicity, I think Typescript is a must nowadays, it's good for maintainability and teamwork but for a simple tutorial I think it's overkill

    • @AnimelifeYT
      @AnimelifeYT 4 месяца назад +3

      Bro you should also use typescript.

    • @okkashaally2115
      @okkashaally2115 4 месяца назад +4

      You haven't built a real project, come back a year later

    • @ayoubdev8019
      @ayoubdev8019 4 месяца назад

      @@okkashaally2115 honestly i built a lot using js with no need to TS, and tbh ts is in my plans but just didnt learn it yet

  • @tairouthecreator2196
    @tairouthecreator2196 4 месяца назад

    Does this also work with three pages?

    • @olivierlarose1
      @olivierlarose1  4 месяца назад +1

      Yes!

    • @tairouthecreator2196
      @tairouthecreator2196 4 месяца назад

      Just wanted to say a big thank you for your incredibly helpful explanations and tips!
      Your ability to break down complex topics into easily understandable terms is truly remarkable. Thanks to your expertise, I was finally able to achieve new skills .
      I'm incredibly grateful for your help and I'm so glad you share your knowledge with others. Keep up the amazing work!
      Quick question: How can I make this code work for multiple pages?
      Cheers

  • @themd347
    @themd347 4 месяца назад

    Wow, make more videos using Tailwind

  • @ariyanunknown
    @ariyanunknown 4 месяца назад

    Amazing stuff Love this channel ❤❤❤❤

  • @mianshahzeb4801
    @mianshahzeb4801 4 месяца назад

    bro you always surprises me and exceed my expectation

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 4 месяца назад

    beatiful!!

  • @orangvaik
    @orangvaik 4 месяца назад

    thanks for sharing! awesome parallax love it❤

  • @404-not-found-service
    @404-not-found-service 4 месяца назад

    Thanks Oliver

  • @Way_Of_The_Light
    @Way_Of_The_Light 4 месяца назад

    Very cool 🙌

  • @DianPratama-wz9qg
    @DianPratama-wz9qg 4 месяца назад

    BRO!!! that was insane

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 4 месяца назад

    Amazing vid ❤

  • @nellymotion
    @nellymotion 4 месяца назад

    Nice transitions!

  • @Osirisdigitalagency
    @Osirisdigitalagency 4 месяца назад

    Cool.. seen this sampled on @codegrid channel… love your content ❤