Build a Parallax Section Transition with React and Framer Motion

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

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

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

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

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

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

    • @eduardocouto112
      @eduardocouto112 6 หลายเดือนก่อน +1

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

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

    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.

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

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

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

    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 ❤

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

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

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

    bro you always surprises me and exceed my expectation

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

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

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

    Just clicked the subscribe button, this guy is fantastic !

  • @SSan-n3q
    @SSan-n3q 7 หลายเดือนก่อน +1

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

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

    BRO!!! that was insane

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

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

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

    Amazing stuff Love this channel ❤❤❤❤

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

    thanks for sharing! awesome parallax love it❤

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

    Thanks Oliver

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

    Nice transitions!

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

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

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

      Bro you should also use typescript.

    • @okkashaally2115
      @okkashaally2115 7 หลายเดือนก่อน +5

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

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

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

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

    Amazing vid ❤

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

    beatiful!!

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

    Thanks man

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

    Very cool 🙌

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

    THank you so much

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

    Love You man

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

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

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

    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!

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

    I love your videos

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

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

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

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

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

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

  • @ruuma1074
    @ruuma1074 26 วันที่ผ่านมา

    did someone make it when using lenis? mine is kinda laggy when scrolling using lenis, even with their basic react framer-motion intregation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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.

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

    Does this also work with three pages?

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

      Yes!

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

      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

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

    What about smoothness in scrolling how did he do that?

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

      Using lenis scroll library 🤝

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

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

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

      @@olivierlarose1 u think? =/

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

    Wow, make more videos using Tailwind

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

    Please increase the font size of code

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

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