Build a Parallax Section Transition with React and Framer Motion

[@edward-vonschondorf-dev]

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

[@abdelkarimelmanssouri9392]

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

[@eduardocouto112]

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

[@kush8852]

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 ❤

[@randeeprana5622]

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

[@SSan-n3q]

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

[@Ivan-Shyriaiev]

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

[@kietletri7413]

Just clicked the subscribe button, this guy is fantastic !

[@mianshahzeb4801]

bro you always surprises me and exceed my expectation

[@nnikchikvaidze]

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

[@ayoubdev8019]

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]

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

[@olivierlarose1]

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]

Bro you should also use typescript.

[@okkashaally2115]

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

[@ayoubdev8019]

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

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

[@DianPratama-wz9qg]

BRO!!! that was insane

[@ariyanunknown]

Amazing stuff Love this channel ❤❤❤❤

[@urkaoe]

thanks for sharing! awesome parallax love it❤

[@nellymotion]

Nice transitions!

[@404-not-found-service]

Thanks Oliver

[@Jishanthegodev]

Amazing vid ❤

[@Way_Of_The_Light]

Very cool 🙌

[@zillalsenmesrane1022]

Love You man

[@berad6034]

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

[@shawn-skull]

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.

[@giggitygigs]

Thanks man

[@aymenbachiri-yh2hd]

THank you so much

[@zukajeladze3975]

I love your videos

[@soyelchicodelanus8471]

beatiful!!

[@rvsdesk]

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!

[@WanderingBall]

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

[@Ebokk]

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

[@ruuma1074]

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

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

[@CodeWithPhoenixx]

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.

[@mdsazzadhossainsiam6279]

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

[@tonysunny572]

What if, there as more than two sections. ???

[@annimate_guru]

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

[@berad6034]

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

[@YacineBenziane-k6f]

What about smoothness in scrolling how did he do that?

[@Solo_playz]

Using lenis scroll library 🤝

[@dhananjaygupta8554]

Please increase the font size of code

[@Osirisdigitalagency]

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

[@themd347]

Wow, make more videos using Tailwind

[@MystifulHD]

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

[@olivierlarose1]

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]

@@olivierlarose1 u think? =/

[@mazwrld]

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]

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

[@mazwrld]

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

[@olivierlarose1]

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

[@mazwrld]

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

[@tairouthecreator2196]

Does this also work with three pages?

[@olivierlarose1]

Yes!

[@tairouthecreator2196]

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