Build a Smooth Parallax Scroll with Framer Motion, Lenis Scroll, Nextjs

[@by_huy]

Man you are filling the hole that we're missing in the community right now, it's amazing that you're digesting these animations and recreate them on your own. I'm wondering what's your process in recreating the animations/UI effects that you see? Other than that keep up the amazing work man, you've got my support as a dev & designer 🔥

[@olivierlarose1]

Hey glad to you see here! Your videos are super nice too. And I don’t really have a specific process, I just go with my intuition and trial and error. It can take me 2-3 days at time and sometimes I’m unable to recreate or it ends up being super complex / messy so I leave it aside. Sometimes when I have no clue I either use the dev tools to try to understand how they did or I sleep on it and I usually wake up with an idea. You keep working on your videos as well my friend the community needs people like you too!

[@by_huy]

@@olivierlarose1 Super insightful Oliver, perhaps people will find it really helpful to see your intuition and trial & error in a video! I would love to see it haha... Also, thank you for your kind words

[@igmtink]

@@olivierlarose1 same process on me, there's a time that I don't have any idea because of the continuous trial and error working more than 8 hrs then I will sleep then when I wake up suddenly new idea will come up, also I do the same on trial and error I inspect their website 😁

[@wondays654]

This channel is a hidden gem.

[@olivierlarose1]

Appreciate it!

[@locsta262]

Really man

[@edojoshua]

not for long... and his blog is even better

[@olivierlarose1]

👊appreciate it

[@Twinex_x]

True

[@Vagabondi404]

Glad the youtube algo sent me here, you explain really good all the steps and this tutorial is high quality

[@olivierlarose1]

Thanks! I appreciate it

[@victoriamatthews1811]

You're my role model. OMG!!! Thank you so much for these contents.

[@olivierlarose1]

My pleasure🤝

[@borsaniasushant1]

Amazing content - latest technologies, breathtaking animations, awesome discord server ! THANK YOU SO MUCH.

[@olivierlarose1]

Cheers👊

[@zillalsenmesrane1022]

Your animations are something else bro thank you for everything keep up the good work

[@igmtink]

I love all of your ideas to recreate any animation using library ❤

[@olivierlarose1]

🤝💯

[@sohambhosale5780]

Another great one from Oli, keep it up man you rock!!😍😍

[@olivierlarose1]

Thanks! I appreciate it

[@HelloErrors]

Waiting for next tutorial, to learn complete gsap & framer motion.

[@olivierlarose1]

Soon💯

[@wasim_techie]

@@olivierlarose1 Thank you you're very humble person

[@olivierlarose1]

🙏

[@donecorleone]

God bless you!! This channel is by far the best I found in a long time on youtube its like a fking treasure box

[@olivierlarose1]

🙏that means a lot

[@ryostyles9904]

Thank you so much. I was trying a lot to convert the y scroll value to a axis value, it finally works now :)

[@nichnaps]

Sheeeeesh! So easy to follow! New favourite channel

[@olivierlarose1]

Glad you liked it!

[@matiasgigena1912]

here for the page transition animation waiting room ❤ Great video

[@olivierlarose1]

Haha waiting for that too! I’m releasing a video as soon as they fix it

[@itsjmendez]

Great content! short story - I asked the dev team on Twitter that created Lenis and requested a tutorial with Next.js. They said they do not have one...

[@olivierlarose1]

haha well here's one!

[@redhood7105]

Damn! Really nice channel you have got there! Nicely paced videos and tons of usefull tips.

[@olivierlarose1]

Glad you like the videos🤝

[@aymenbachiri-yh2hd]

THanks, please keep posting videos like this

[@parkerrex]

Dude -- phenomenal video. Loved getting to do a code-along here.

[@АртёмМокринский-ц9е]

your content is unique, thank you

[@ziacodes]

Wait till I use all of your videos knowledge into my portfolio really soon. Just jumbled up in multiple projects

[@olivierlarose1]

haha let's goo

[@hewhomustnotbenamed0316]

Hi this is absolutely amazing But wanna ask how can i make the same thing on react js

[@shaked1233]

Thanks youtube algorithm for showing me this!

[@sofiabargues]

Great tutorial! Thanks!

[@sadique_x_]

you're too good🙌

[@taunado]

Great,thanks. Please create more tuts showing these types of animations that are not just 'brutalist' in style.

[@olivierlarose1]

For sure💯

[@remyirconnor5074]

Mec, tu expliques trop bien et les skills que t'abordent sont très intéressants, big push pour toi ☺

[@olivierlarose1]

Merci! C'est super apprecié

[@hassaantahir3861]

Bro .... Soo cool. Can't wait to see more.... 🔥

[@olivierlarose1]

Cheers!

[@hassaantahir3861]

​@@olivierlarose1 Also I have a list of these amazing websites that I saved for the remakes

[@ilmanmanarulqori5632]

Aahhhhhh lets gooooowwwww Framer Motion 🎉

[@olivierlarose1]

Let's goooo!

[@khaledx30ify]

thank you Olivier you are awesome

[@olivierlarose1]

Thanks for the support as always!

[@lacunajhom]

Noice, thank you for the amazing content!

[@olivierlarose1]

My pleasure thanks for the support!

[@imransefat8770]

Super awesome content!

[@olivierlarose1]

Cheers👊

[@secretarybailey770]

your work is so fucking gnarly bruz keep it up

[@olivierlarose1]

🔥🤝

[@ozansozuoz]

Amazing!

[@olivierlarose1]

Cheers!

[@mhalwasoffice6132]

we wanna react tuto with gsap

[@ramin9134]

thanks a lot , please make a tutorial using locomotive scroll

[@olivierlarose1]

Sounds good, will do!

[@manishpanchal1098]

thanks buddy❣

[@olivierlarose1]

🤝

[@ddom99_]

GOAT

[@olivierlarose1]

My man!

[@Makwaje]

You're amazing !!!! I really like the way you explaining things, do you have any courses? or at least working on making one?

[@olivierlarose1]

I'm working on one! You can see it here: blog.olivierlarose.com/courses/web-animation-course

[@salaheddinebenchraa6906]

great content!!! I wanted to apply this in my react project but the next/image does not exist in react, could someone please tell me how to replace it with img i changed the fill attribute to width and hight but it didn't work ?

[@razorjhon2622]

Thank you for this video , i tried to use Lenis but it has some problem with the scroll , it keeps handing on scroll , when i try to scroll it start the scroll after 1s without any smoothing or somethin even if i added duration or easing it has the same problem , I am using latest NextJS 13 with index.js page folder

[@olivierlarose1]

Not sure I understood your problem, join the discord you’ll be able to find help there

[@eldi]

Not optimized for mobile, issues with responsiveness and extremely jargy / laggy, especially if you have on battery-save mode (iPhone)

[@mosjunk7764]

Loved it subed it

[@olivierlarose1]

Cheers!

[@theMArio-k7x]

Great one 🎉

[@olivierlarose1]

👊

[@rashidshahriar7913]

Another greate video. But why you are not using tailwind ?

[@olivierlarose1]

I love tailwind it saves a lot of time but in the end tailwind does not enable anything new so I assume it's not a biggie for the viewers and also I like to separate the styling from the JSX for readability.

[@sai_charan]

You're the best!

[@olivierlarose1]

Appreciate it!

[@EbrahimAmr]

Greet work man, you should make an animation course

[@olivierlarose1]

Working on it!

[@JiNx-yf1ef]

Great video as always ❤, could you please make a video about nextjs 13 page transition I'm having trouble achieving exit animation

[@olivierlarose1]

It's not your fault haha the exit animations are broken right now in Next 13. Go thumb up the issue! github.com/vercel/next.js/issues/49279

[@WebHatke]

i have actually used lenis before , but not like this. i saw a similar video where the video creator uses it as a component where he intantiates the reactlenis . but the component is a use client and then he uses it to wrap the layout.jsx children. does that make all the components inside layout.jsx client components. how to solve this issue.? your take on using lenis is better , but the problem here is that i have to initialize a new lenis object everytime i create a component, i am really confused how to use the lenis scroll in nextjs effeciently so that it doesnt effect the server side rendering and is easy on dx

[@TGGL-f8k]

Man this transition is something for real. I just wanna implement this smooth parallax scroll in tailwind. Has anyone tried in tailwind?

[@olivierlarose1]

It's definitely possible, won't change anything just the way you do the styling

[@rodrigosalmeron7216]

Top notch content. Now every week im waiting for another awwwards hack tutorial xD. Huge respect for all the effort and hard work you are putting in your videos. Im learning a lot from your videos and your open repos. Keep going, you are creating really awesome content: Kudos !

[@olivierlarose1]

Cheers man I appreciate the support🙏

[@WanderingBall]

i love it

[@olivierlarose1]

Thanks!

[@hitanshthakur6030]

Could you increase the font size of your code it's not quite visible on small devices.

[@olivierlarose1]

Sounds good I'll look into that

[@devyb-cc]

any plan to exploring 3d world?

[@olivierlarose1]

Yes very soon! Around September is my plan

[@devyb-cc]

@@olivierlarose1 looking forward to it 🙌

[@montof9195]

Hi, love your channel, we don't get to see that type of content very much ! Could you also add some info about the responsiveness of these types of animations / projects ? It's usually hard to get them to adapt to a mobile layout. (also if you're french Salut !)

[@olivierlarose1]

Salut oui je parle français :) and sounds good thanks for the feedback I'll make sure to spend some time on that part for the next videos!

[@testingtesting-d3t]

Isn't it necessary to add the lenis css?

[@olivierlarose1]

It’s recommended but not necessary! I tried with and without and didn’t see a difference for this specific case. Let me know if you find a case where it’s necessary I’d be curious. Cheers!

[@XxbankerboomxX]

Instead of each column having y= {y}, {y2}, {y3}, {y4}, could you not just edit the y={y}, y={y*1.5}, y={y*2} etc? Great video by the way

[@olivierlarose1]

It might seem like you can do that but the {y}, {y2}, y{3} etc are not numbers they are motion objects so you can’t multiply them with something else

[@plantasia111]

I just want to know why you don't choose TailwindCSS integrated in Next.js for your projects. I love your content and creativity, keep it up :)

[@olivierlarose1]

I might!

[@FernandaMartinez-ht7er]

Hey Olivier, thank you for your effort in creating this unbelievably good and inspiring content, it really stands out among all the channels I've came across. I'm quite curious about your approach to CSS. Do you think it's achievable to replicate your techniques using Tailwind or it would be too restrictive?

[@olivierlarose1]

Hi, you could achieve the same result with tailwind as well and possibly faster too. I don’t use tailwind in my tutorials not to bloat the JSX (so that it’s easier to read essentially). But you could achieve everything with tailwind no problem.

[@TGGL-f8k]

Hi Dear, Did you implement this project in tailwind ?

[@olivierlarose1]

@@TGGL-f8k Not as of yet!

[@Kisuke777]

that was great❤❤❤❤

[@olivierlarose1]

Cheers!

[@rindodosboletos]

Muito bom! Um salve do Brasil. Continue com o ótimo trabalho

[@olivierlarose1]

obrigado!

[@AhmadMughal1]

I have a question and you seem to be the only person that is actually doing content related to this. Is there some way to implement this type of smooth scroll to the whole Next.js application without making it a client side component? All i want is this smooth scroll for all the application but making the whole app client side defeats the purpose of using Next.

[@olivierlarose1]

It won’t make the app client side tho. Don’t confuse client component and client side rendering, those are two different things and there seems to be a lot of confusion and misinformation related to that. If by “defeats the purpose of using Next” you mean not having your pages pre-rendered on the server, specifying “use client” WILL STILL allow Next.js to pre render the html. However, if you start putting a fetch call inside a use effect, then that data won’t be pre rendered. Hope that makes sense. So to answer your question, there is no way of having a smooth scroll on the whole app without specifying the “use client”. However, you can put a smooth scroll high up in your hierarchy and thus making most of the children components “client components” (not client side rendering) and it will pre render your html.

[@AhmadMughal1]

@@olivierlarose1 Thank you for replying and clarifying the confusion. i had Client Components and Client Side Rendering confused as i assumed anything marked with "use client" was also client side rendered. Now i understand the content that might be asynchronous is what will not be pre rendered but the rest of the "shell" should. Thanks again for helping with my ignorance.

[@olivierlarose1]

@@AhmadMughal1 All good I was actually very confused as well at the start!

[@abdulHadiarbi]

Amazing work . I completed this but i am having some kind of breaking glitch in mobile device . And if u scroll slowly in desktop u will also see it there . Please take a look . Waiting for your response.

[@olivierlarose1]

Hey! Glad you like the videos. Basically I did not make this animation responsive so it won’t work in mobile as is, you’ll need to tweak the css to make it work. The visual bug you’re talking about when scrolling slowly is related to the way Lenis scroll does their scroll interpolation, there’s not much we can do to fix that unfortunately, but I personally found it quite negligible. Cheers!

[@abdulHadiarbi]

How can i minimize the breaking effect in mobile.

[@lasse-mo]

I managed to remove the glitch by adding options to the roo Lenis Wrapper:

[@mcmanimie]

@@lasse-mo Normalize wheel seems like it was removed. Is it still working for you? Oddly enough for me, when I remove Lenis from the project it's jerky on mobile AND desktop.

[@jsantos1220]

So basically, if i want to animato something in nextjs now it has to be client side, so no SEO, this is frustrating

[@olivierlarose1]

That’s not true. Don’t confuse client components and client side rendering

[@jsantos1220]

Thats not clear for me, whats the diference@@olivierlarose1

[@igmtink]

I hope there's a mobile responsive design

[@olivierlarose1]

Not currently! But it’s definitely possible to make one

[@igmtink]

@@olivierlarose1 I already make it responsive in mobile but it took a lot extra work 😅 I check the website where you inspired that animation that's why I make it, but somehow I'm not satisfied so many things to adjust from mobile to desktop like the height of viewport of the container, also the speed of scrolling of the Y value, I can't figure out how did the website where you inspired is responsive even mobile to desktop it's like the speed of scrolling is the same it's not changing, I explore and explore by inspecting the website then I noticed the height of the container is same from mobile to desktop and also the size of the column (image) it's the same from mobile to desktop and still responsive how's that possible 😕 I hope you can make a part two of this video if you already figured it out that responsive column (image) also for the dynamic Y value even changing the height of container it's still the same the speed

[@olivierlarose1]

@igmtink definitely need to tweak a couple of things. I’ll let you know if I have a mobile version of it

[@igmtink]

@@olivierlarose1 thank you ❤️ this kind of youtuber deserve more supports / subscriber, I have seen other youtuber and it's not like you that active on your supporter like you answering our questions 🙂

[@olivierlarose1]

I appreciate it :)

[@sebosamuraj]

😍

[@olivierlarose1]

👊

[@userj-s2000]

V good

[@olivierlarose1]

Cheers

[@MahabubHossain-qq7ut]

Great video. I'm working on a next Js and Typescript project, How can I modify the scroll-speed in lenis? This is my current code const lenisRef = useRef(null); useEffect(() => { const lenis = new Lenis(); lenisRef.current = lenis; function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); }, []);

[@olivierlarose1]

When you create the Lenis instance you can add an option for « lerp » and tweak the speed with that

[@MahabubHossain-qq7ut]

thank you

[@DavidAdewale-n4y]

why do you rush? it's hard to learn at that speed

[@DavidAdewale-n4y]

I honestly would need to subscribe to you. And if you are going to ever create a course in the future where you take us step by step into these libraries and understanding how they work behind the scenes and how to use them.. I will buy that course

[@olivierlarose1]

Thanks for the feedback!

[@olivierlarose1]

For sure! I have a course in construction here: blog.olivierlarose.com/courses/web-animation-course

[@DavidAdewale-n4y]

@@olivierlarose1 signed up!

[@mintifu1658]

You should change your vscode settings and make the font bigger. I can’t read what you have in your vscode = Im not gonna watch it

[@olivierlarose1]

Roger that🤝

[@adhirajsingh2429]

Hey! Amazing Effect but it is not responsive. Please do something, only you can save me !!!

[@olivierlarose1]

Just a bit of css should do the job!

[@adhirajsingh2429]

Can you please show it? pls @@olivierlarose1

[@ruizxzx]

"404 This page could not be found. " this is showing in your demo.

[@olivierlarose1]

Thanks for the heads up! I fixed it

[@ruizxzx]

ok its working but make sure to update the link in description bcz its not working...but the original one from the site is working so just make sure to update the link@@olivierlarose1

[@essenc3189]

too fast

[@olivierlarose1]

Noted✍️