Build a Parallax Section Transition with React and Framer Motion

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.ย. 2024

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

  • @edward-vonschondorf-dev
    @edward-vonschondorf-dev 3 หลายเดือนก่อน +7

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

    • @abdelkarimelmanssouri9392
      @abdelkarimelmanssouri9392 3 หลายเดือนก่อน

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

    • @eduardocouto112
      @eduardocouto112 3 หลายเดือนก่อน

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

  • @Ivan-Shyriaiev
    @Ivan-Shyriaiev 3 หลายเดือนก่อน +1

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

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

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

  • @kush8852
    @kush8852 3 หลายเดือนก่อน

    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 ❤

  • @user-yz2mv8kn4x
    @user-yz2mv8kn4x 3 หลายเดือนก่อน +1

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

  • @kietletri7413
    @kietletri7413 3 หลายเดือนก่อน +1

    Just clicked the subscribe button, this guy is fantastic !

  • @ayoubdev8019
    @ayoubdev8019 3 หลายเดือนก่อน +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

    • @larsmoser8448
      @larsmoser8448 3 หลายเดือนก่อน +5

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

    • @olivierlarose1
      @olivierlarose1  3 หลายเดือนก่อน +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 3 หลายเดือนก่อน +3

      Bro you should also use typescript.

    • @okkashaally2115
      @okkashaally2115 3 หลายเดือนก่อน +4

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

    • @ayoubdev8019
      @ayoubdev8019 3 หลายเดือนก่อน

      @@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

  • @framerwme
    @framerwme 3 หลายเดือนก่อน

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

  • @nnikchikvaidze
    @nnikchikvaidze 3 หลายเดือนก่อน

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

  • @mianshahzeb4801
    @mianshahzeb4801 3 หลายเดือนก่อน

    bro you always surprises me and exceed my expectation

  • @rvsdesk
    @rvsdesk 2 วันที่ผ่านมา

    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!

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

    THank you so much

  • @shawn-skull
    @shawn-skull 3 หลายเดือนก่อน

    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.

  • @orangvaik
    @orangvaik 3 หลายเดือนก่อน

    thanks for sharing! awesome parallax love it❤

  • @404-not-found-service
    @404-not-found-service 3 หลายเดือนก่อน

    Thanks Oliver

  • @zillalsenmesrane1022
    @zillalsenmesrane1022 3 หลายเดือนก่อน

    Love You man

  • @ariyanunknown
    @ariyanunknown 3 หลายเดือนก่อน

    Amazing stuff Love this channel ❤❤❤❤

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 3 หลายเดือนก่อน

    beatiful!!

  • @DianPratama-wz9qg
    @DianPratama-wz9qg 3 หลายเดือนก่อน

    BRO!!! that was insane

  • @nellymotion
    @nellymotion 3 หลายเดือนก่อน

    Nice transitions!

  • @zukajeladze3975
    @zukajeladze3975 3 หลายเดือนก่อน

    I love your videos

  • @berad6034
    @berad6034 3 หลายเดือนก่อน

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

  • @Way_Of_The_Light
    @Way_Of_The_Light 3 หลายเดือนก่อน

    Very cool 🙌

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 3 หลายเดือนก่อน

    Amazing vid ❤

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 3 หลายเดือนก่อน

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

  • @cbum3935
    @cbum3935 25 วันที่ผ่านมา

    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??

  • @Osirisdigitalagency
    @Osirisdigitalagency 3 หลายเดือนก่อน

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

  • @mdsazzadhossainsiam6279
    @mdsazzadhossainsiam6279 18 วันที่ผ่านมา

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

  • @Ebokk
    @Ebokk 3 หลายเดือนก่อน

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

  • @shivkumar6374
    @shivkumar6374 3 หลายเดือนก่อน

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

    • @berad6034
      @berad6034 3 หลายเดือนก่อน

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

  • @mazwrld
    @mazwrld 3 หลายเดือนก่อน

    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  3 หลายเดือนก่อน

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

    • @mazwrld
      @mazwrld 3 หลายเดือนก่อน

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

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

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

    • @mazwrld
      @mazwrld 3 หลายเดือนก่อน

      @@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.

  • @YacineBenziane-k6f
    @YacineBenziane-k6f 2 หลายเดือนก่อน

    What about smoothness in scrolling how did he do that?

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

      Using lenis scroll library 🤝

  • @themd347
    @themd347 3 หลายเดือนก่อน

    Wow, make more videos using Tailwind

  • @tairouthecreator2196
    @tairouthecreator2196 3 หลายเดือนก่อน

    Does this also work with three pages?

    • @olivierlarose1
      @olivierlarose1  3 หลายเดือนก่อน +1

      Yes!

    • @tairouthecreator2196
      @tairouthecreator2196 3 หลายเดือนก่อน

      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

  • @MystifulHD
    @MystifulHD 3 หลายเดือนก่อน

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

    • @olivierlarose1
      @olivierlarose1  3 หลายเดือนก่อน +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 3 หลายเดือนก่อน

      @@olivierlarose1 u think? =/