Build a Parallax Section Transition with React and Framer Motion

Source Code / Live demo:

00:00 Intro
00:22 Project overview
00:51 Making the section sticky
2:04 Tracking the scroll
3:54 Animating on Scroll
7:34 Outro

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #threejs

[randeeprana]

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

[edward-vonschondorf-dev]

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

[Ivan-Shyriaiev]

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

[orangvaik]

thanks for sharing! awesome parallax love it❤

[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!

[yzmvknx]

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

[kietletri]

Just clicked the subscribe button, this guy is fantastic !

[mianshahzeb]

bro you always surprises me and exceed my expectation

[kush]

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]

Damn bro, amazing tutorial.

I will replicate this animation straight in Framer. I'll make sure to mention you.

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

[berad]

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

[zukajeladze]

I love your videos <3 Can you do a tutorial on 3d scroll animations

[yirqjkr]

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

[ayoubdev]

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

[Ebokk]

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

[YacineBenziane-kf]

What about smoothness in scrolling how did he do that?

[shivkumar]

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

[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

[Osirisdigitalagency]

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