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 🔥
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!
@@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
@@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 😁
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...
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.
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.
@@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.
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 !)
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?
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.
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 !
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.
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
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 ?
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.
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!
@@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.
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 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 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 🙂
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!
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); }, []);
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
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
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 🔥
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!
@@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
@@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 😁
This channel is a hidden gem.
Appreciate it!
Really man
not for long... and his blog is even better
👊appreciate it
True
Glad the youtube algo sent me here, you explain really good all the steps and this tutorial is high quality
Thanks! I appreciate it
Your animations are something else bro thank you for everything keep up the good work
I love all of your ideas to recreate any animation using library ❤
🤝💯
Amazing content - latest technologies, breathtaking animations, awesome discord server ! THANK YOU SO MUCH.
Cheers👊
You're my role model. OMG!!!
Thank you so much for these contents.
My pleasure🤝
Another great one from Oli, keep it up man you rock!!😍😍
Thanks! I appreciate it
Waiting for next tutorial, to learn complete gsap & framer motion.
Soon💯
@@olivierlarose1 Thank you you're very humble person
🙏
Thank you so much. I was trying a lot to convert the y scroll value to a axis value, it finally works now :)
here for the page transition animation waiting room ❤ Great video
Haha waiting for that too! I’m releasing a video as soon as they fix it
Sheeeeesh! So easy to follow! New favourite channel
Glad you liked it!
God bless you!! This channel is by far the best I found in a long time on youtube its like a fking treasure box
🙏that means a lot
Wait till I use all of your videos knowledge into my portfolio really soon. Just jumbled up in multiple projects
haha let's goo
Dude -- phenomenal video. Loved getting to do a code-along here.
Great,thanks. Please create more tuts showing these types of animations that are not just 'brutalist' in style.
For sure💯
Damn! Really nice channel you have got there! Nicely paced videos and tons of usefull tips.
Glad you like the videos🤝
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...
haha well here's one!
Mec, tu expliques trop bien et les skills que t'abordent sont très intéressants, big push pour toi ☺
Merci! C'est super apprecié
your content is unique, thank you
THanks, please keep posting videos like this
you're too good🙌
You're amazing !!!!
I really like the way you explaining things, do you have any courses? or at least working on making one?
I'm working on one! You can see it here: blog.olivierlarose.com/courses/web-animation-course
Great tutorial! Thanks!
thank you Olivier you are awesome
Thanks for the support as always!
Bro .... Soo cool.
Can't wait to see more.... 🔥
Cheers!
@@olivierlarose1 Also I have a list of these amazing websites that I saved for the remakes
Noice, thank you for the amazing content!
My pleasure thanks for the support!
Thanks youtube algorithm for showing me this!
Greet work man, you should make an animation course
Working on it!
we wanna react tuto with gsap
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.
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.
@@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.
@@AhmadMughal1 All good I was actually very confused as well at the start!
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 :)
I might!
thanks a lot , please make a tutorial using locomotive scroll
Sounds good, will do!
your work is so fucking gnarly bruz keep it up
🔥🤝
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 !)
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!
Super awesome content!
Cheers👊
Man this transition is something for real. I just wanna implement this smooth parallax scroll in tailwind. Has anyone tried in tailwind?
It's definitely possible, won't change anything just the way you do the styling
Amazing!
Cheers!
Great video as always ❤, could you please make a video about nextjs 13 page transition I'm having trouble achieving exit animation
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
Aahhhhhh lets gooooowwwww Framer Motion 🎉
Let's goooo!
Great one 🎉
👊
You're the best!
Appreciate it!
Hi this is absolutely amazing
But wanna ask how can i make the same thing on react js
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
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
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?
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.
Hi Dear, Did you implement this project in tailwind ?
@@TGGL-f8k Not as of yet!
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 !
Cheers man I appreciate the support🙏
thanks buddy❣
🤝
Muito bom! Um salve do Brasil. Continue com o ótimo trabalho
obrigado!
Loved it subed it
Cheers!
that was great❤❤❤❤
Cheers!
i love it
Thanks!
Another greate video. But why you are not using tailwind ?
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.
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
GOAT
My man!
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 ?
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.
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!
How can i minimize the breaking effect in mobile.
I managed to remove the glitch by adding options to the roo Lenis Wrapper:
@@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.
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
Roger that🤝
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
Not sure I understood your problem, join the discord you’ll be able to find help there
So basically, if i want to animato something in nextjs now it has to be client side, so no SEO, this is frustrating
That’s not true. Don’t confuse client components and client side rendering
Thats not clear for me, whats the diference@@olivierlarose1
I hope there's a mobile responsive design
Not currently! But it’s definitely possible to make one
@@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
@igmtink definitely need to tweak a couple of things. I’ll let you know if I have a mobile version of it
@@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 🙂
I appreciate it :)
Could you increase the font size of your code it's not quite visible on small devices.
Sounds good I'll look into that
V good
Cheers
any plan to exploring 3d world?
Yes very soon! Around September is my plan
@@olivierlarose1 looking forward to it 🙌
😍
👊
Isn't it necessary to add the lenis css?
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!
Hey! Amazing Effect but it is not responsive. Please do something, only you can save me !!!
Just a bit of css should do the job!
Can you please show it? pls
@@olivierlarose1
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);
}, []);
When you create the Lenis instance you can add an option for « lerp » and tweak the speed with that
thank you
why do you rush? it's hard to learn at that speed
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
Thanks for the feedback!
For sure! I have a course in construction here: blog.olivierlarose.com/courses/web-animation-course
@@olivierlarose1 signed up!
"404 This page could not be found. " this is showing in your demo.
Thanks for the heads up! I fixed it
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
too fast
Noted✍️