Which you would explain certainly key concepts like “trigger”. What does that entail exactly? Instead of simply assuming that we all know what it means. The reason we are watching this video is to learn new concepts, right? Not just watch you do something you know in your head how to do. Anyway, still grateful for the video. So thank you. 🙏🏻
@veipper
Жыл бұрын
At this point you're just reading my mind. Thanks for the tutorial bro don't ever stop making content!
@olivierlarose1
Жыл бұрын
Nice🔥
@shlokgupta4939
8 ай бұрын
Much awaited tutorial I have been looking for. Trust me from the past week I have been struggling to run locomotive in nextJs and here I found the solution. Thank you so much for the video, appreciate it a lot.
@olivierlarose1
8 ай бұрын
My pleasure
@shubhammaurya9633
Жыл бұрын
Just found this channel and immediately subscribed this channel as exactly what i need you are developing as i am learning next js with these types of effects and many peoples do these with vanilla but i want these effects in next js and at thanks again
@olivierlarose1
Жыл бұрын
Nice I’m glad it’s helping you💯
@learncode5110
Жыл бұрын
Bro this is so awesome I was litreally searching who can teach us this awwward type animation using react or else nextJS so happy to find you😍.... please its an suggestion please bring more on such animation using next js like making portfolio end to end, websites, single page website etc.. will we be so grateful 😊😇😇
@olivierlarose1
Жыл бұрын
Will do🔥
@learncode5110
Жыл бұрын
@@olivierlarose1 Awesome 🔥
@mykhaylotymofyeyev9565
Жыл бұрын
Lenis is 🔥🔥 I’ve introduced it in the company where I work projects, great library. Awesome video too, great work 🤘🏻👏🏻
@olivierlarose1
Жыл бұрын
Yes sir🔥 Cheers!
@SomeThinkingOFF
5 ай бұрын
Many of the viewers are having some issues with the GSAP animation, like in the case of the Intro Component. Instead, rap all the GSAP code into => let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); //
@ChrisCoutts
4 ай бұрын
thank you so much!! I thought I was going crazy missing out something
This is amazing!!! finally found the exact tutorial i'm looking for. Thank you for using locomotive scroll and gsap scroll trigger using next.js
@olivierlarose1
Жыл бұрын
🤝🤝my pleasure
@shreetimohapatra4142
2 ай бұрын
I demand more project tutorials!!!! This is so good man!
@dickimaulanayusuf616
Жыл бұрын
AMAZING !, but the way you say "easy" that make my hands goosebump 😆
@olivierlarose1
Жыл бұрын
🤝😂
@igawisniewska5456
Жыл бұрын
Was legit waiting for this tutorial since I saw that you posted the write up on your blog. Thanks Oli xx
@olivierlarose1
Жыл бұрын
Pleasure!
@andrealvaradocampos4050
10 ай бұрын
thanks so much i love your videos , lo que mas me agrada es que en tu pagina web esta todo el codigo y tmb esta explicado paso por paso , muchas gracias olivier
@francocaporaletti3246
9 ай бұрын
thank you for this! I would like you to make part 2 of this tutorial making it responsive it would be insane!
@olivierlarose1
9 ай бұрын
Noted!
@IOKFORLIFE
10 ай бұрын
Wow you are so kind to share your knowledge with the world! Can you do a video about Smooth Scroll using framer motion with nextjs please?
@olivierlarose1
10 ай бұрын
For sure!
@faisal_dev951
Жыл бұрын
hands down the best channel on earth !!
@olivierlarose1
Жыл бұрын
I appreciate that🔥
@jazzeeblaze
6 ай бұрын
Fck... why is this channel so underrated????? Bro You deserves Millions...😟
@mindbodyps
3 ай бұрын
Bro Just amazing, keep making video, this is very helpful
@verbs-otier-ru
Жыл бұрын
At least I can do is subscribe and like this video. That was a great job you did. Thank you!
@olivierlarose1
Жыл бұрын
Cheers!
@magframed
Жыл бұрын
Amazing content! Need these kind of tutorials.
@olivierlarose1
Жыл бұрын
Glad to hear!🔥
@BMikel
Жыл бұрын
You are talent. Subscribed without hesitation
@olivierlarose1
Жыл бұрын
Cheers🔥
@user-dw6yp7ld9s
5 ай бұрын
Thanks for providing about lenis
@ep4r4
4 ай бұрын
Buenisimo!!! en lo posible apunta con IA a la audiencia Latino Americana porfa! tu material es muy bueno y eso te dará un alcance mayor ya que no hay un material de calidad en español. Un abrazo...
@wassup102
Жыл бұрын
you are awesome, please continue uploading, your new sub
@olivierlarose1
Жыл бұрын
Cheers!
@Diego_Cabrera
Жыл бұрын
Seriously amazing content man. Keep it up
@olivierlarose1
Жыл бұрын
🔥respect
@imransefat8770
Жыл бұрын
Absolute gem ❤️
@olivierlarose1
Жыл бұрын
🤝
@TheThebestgame4
6 ай бұрын
for some reason locomotive scroll isn't working for me
@curiousThingsAllAround
4 ай бұрын
Would love to see a similar tutorial made for horizontal scroll and pinning sections to the left as we scroll through. I've tried this myself numerous times and still have't gotten it 😪
@0hyeon500
8 ай бұрын
I enjoy watching the videos every time. I have one question! Can I run this project on Page Router instead of App Router?
@olivierlarose1
8 ай бұрын
for sure you would be able to yes
@filipevalentegomes2383
Жыл бұрын
That’s all I needed, thanks
@olivierlarose1
Жыл бұрын
🤝
@mazwrld
Жыл бұрын
bro is majestic
@olivierlarose1
Жыл бұрын
😂thanks
@otiamaino2461
Жыл бұрын
Bless you bro 🙏🏾
@olivierlarose1
Жыл бұрын
Cheers!
@sai_charan
Жыл бұрын
Thank you!
@olivierlarose1
Жыл бұрын
My pleasure!
@itsjmendez
Жыл бұрын
Great stuff! 🚀
@olivierlarose1
Жыл бұрын
Cheers!
@suhaylmuminov3825
Жыл бұрын
Great video! Btw have you tried Motion One? It is often seen as a better and more lightweight alternative to GSAP
@olivierlarose1
Жыл бұрын
Never tried it! But thanks for the info I’ll look into it
@nikhilpsathyanathan
9 ай бұрын
really awesome
@olivierlarose1
9 ай бұрын
Thanks!
@nikhilpsathyanathan
9 ай бұрын
I have doubt. I have seen an animation somewhere. When we scroll down after a point, it suddenly changes to a dark theme with a ripple effect Any thoughts
@nikhilagrawal8263
6 ай бұрын
i don't know what is wrong with my piece of code because i have copied exactly what you have written but it doesn't seem to work perfectly or even as close to yours. I even referred to the source code provided by you but i don't know what's wrong. For the starters... in the Intro page, when i scroll up the backgroundImage doesn't go back to its full length
@imrrankhan8689
10 ай бұрын
Tutorial is super awesome ! am so glad i found ur channel. 1. i also have a doubt if we have multiple pages then for each pages do we have to implement locomotive scroll ? 2. if i navigate to another page using useNavigate() and come back to previous page then the progress event of locomotive scroll stops working is there any solution on how can i make the progressEvent of loco-scroll work
@olivierlarose1
10 ай бұрын
If you have multiple pages I would initialize the Loco Scroll inside a context provider that wraps all your pages, that should solve most of of your problems
@giannisnik5295
6 ай бұрын
Excellent job!For some reason in next 14.1 they are not working.
@kacpergaka3892
7 ай бұрын
I realized this setup doesn't work so well with multiple pages. If you click on the nav item (to change the page), while the scroll is still moving a bit (happens very often with smooth effect...), the page doesn't initialize in the correct position. Olivier, would you be able to share the video just focused on correct setup for Lenis and Next.js with multiple pages? I see a lot of people struggle on that on forums and I haven't seen a single working solution.
@Sawqlain
7 ай бұрын
I'm struggling to understand how to achieve quick-loaded pages from next.js while doing animations. It looks like it isn't possible to have both. If I want a landing page downloaded quickly I have to use the 'use client' directive which means I can't optimize for SEO.
@olivierlarose1
7 ай бұрын
It is possible to have both. Even with “use client”, your components will still be optimized for SEO. The “use client” directive does not mean your component will be rendered on the client only. I believe you’re confusing client components and client side rendering. As a proof, have a component with the “use client” then disable javascript and you’ll see the server returns your html
@rootbeer2366
9 ай бұрын
Im here for the Locomotive and Lenis scroll beef only
@olivierlarose1
9 ай бұрын
haha! They actually have a good relationship
@jayasaikiran1761
Жыл бұрын
Bro if possible make a video tutorial on Gsap page transition overlay while navigating from one component to another component using NextJS 13 and GSAP.
@olivierlarose1
Жыл бұрын
The exit animations are currently broken in Next13, but as soon as they fix it I have multiple ideas! Stay tuned
@borsaniasushant1
8 ай бұрын
Hey Olivier, thanks for the tutorial. Is it possible to make the Project section image pinning behaviour with just Framer motion? If so, can you please make tutorial or help me understand step that I can follow?
@olivierlarose1
8 ай бұрын
I’ll see what I can do!
@kacpergaka3892
9 ай бұрын
Why initialize within page and not layout.js? Also isn't it better to initialize it in separate component, so the layout & page remain server side? Thanks for your videos!
@olivierlarose1
9 ай бұрын
It’s more optimized to initialize it in a component yes but not in the layout.js tho. Here I put it directly in the page.js for speed purposes but in real world scenario you could split it if you have static data fetching in the page.js
@vaibhavbhardwaj48
9 ай бұрын
We are using useEffect in page.js file which is making it client component for locomotive, isn't it affecting SEO negatively? If it does, what do you suggest to do to overcome this problem? As I want my site to be SEO friendly which can rank on google search while using locomotive, gsap etc. Please answer this question as I'm looking everywhere but not getting my answer. THank you.
@olivierlarose1
9 ай бұрын
Hi, yes using animations force the components to be “Client components” but that does not affect the SEO. Client components will still be pre rendered on the server. there’s a lot of confusion right now and I completely understand. Your page won’t be pre-rendered only if you have data fetching inside a use effect which will make your component “client side” (not to be confused with “Client components”).
@fx_ea7734
10 ай бұрын
can you put the video in the normal verlocity so that normal people can see the coding?
@olivierlarose1
10 ай бұрын
Sorry about that, check out the written version if you have a hard time following: blog.olivierlarose.com/tutorials/smooth-scroll
@fx_ea7734
10 ай бұрын
thnaks, you are a very good instructor@@olivierlarose1
@AdarshSingh-mo1kc
Жыл бұрын
it was nyc
@blastkage7190
7 ай бұрын
How do i import locomotive scroll in vite and use it (In nextJs u used async useEffect that will not work on vite)?
@blastkage7190
7 ай бұрын
I have figured it out i was installing 'npm i locomotive-scroll' (which installed v4 ) whereas 'npm i locomotive-scroll@beta ' installs v5 now the locomotive scroll works
@ismaeelyaghoubi860
11 ай бұрын
Hi there, thanks for your cool videos, I faced a problem in ios when using locomotive scroll v5, when user stop scrolling the page just scroll back to top. Any idea?
@olivierlarose1
11 ай бұрын
Never encountered that problem but keep in mind Locomotive scroll v5 is in beta so it’s possible there might be some weird bugs
@kobibr9362
Жыл бұрын
I just realized that I have never used “object-position” 😮
@olivierlarose1
Жыл бұрын
Hehe it’s a nice little property for sure
@NAYMURWEB
Жыл бұрын
brother, do we have still the power to control direction using data-scroll-direction="horizontal". I try it but it's not working in locomotive V5
@olivierlarose1
Жыл бұрын
Yes in the options when creating the scroll instance. If you mean the data-scroll-direction no it’s gone from v5
@NAYMURWEB
Жыл бұрын
@@olivierlarose1 Then, how could I make horizontal scrolling? Suppose I have a heading tag, and I want it to be horizontally animated when I scroll to this heading, not vertically
@olivierlarose1
Жыл бұрын
You can use framer motion with useScroll and useTransform. Check out this video: kzitem.info/news/bejne/saWt0WqcaqOWZqA
@misterbean6674
Жыл бұрын
How to scroll to specific section smoothly when we click on say a nav link?
@olivierlarose1
Жыл бұрын
Simply use the window.scrollTo() function
@learncode5110
Жыл бұрын
Bro another concern was what can be alternative to CSS coz vanilla css is just boring and time consuming😄
@olivierlarose1
Жыл бұрын
What do you use? Tailwind?
@learncode5110
Жыл бұрын
@@olivierlarose1 Yes bro just for web app and landingpage.... so can we use tailwindcss for such animation?
@olivierlarose1
Жыл бұрын
@@learncode5110 Not for the animations but for the overall layout I could use Tailwind yes I might start doing that soon.
@learncode5110
Жыл бұрын
@@olivierlarose1 Awesome bro that will be awesome.... bro only for layout use tailwind css ani for animation gsap can you bring tutorial on this? because now a day mostly css is not prefered tailwind is most used so
@olivierlarose1
Жыл бұрын
@learncode5110 If I see more comments on tailwind I will definitely start using it! Thanks for your input🔥
@dichotomy6838
Жыл бұрын
This is great! However locomotive and the parallax effect doesn't seem to be working on mobile . Is there a solution for this? :)
@olivierlarose1
Жыл бұрын
Hey! Glad you liked. For mobile, you would normally avoid using any kind of smooth scroll. However, if you still want a parallax in mobile, you have a couple of options. The first one would be to use the lenisOptions: {smoothTouch: true} on the locomotive scroll v5. You would need to test it out, it might be jammy. The second option would be to use Framer Motion to create your parallax instead of using the Locomotive scroll parallax for mobile. You can check my video on smooth parallax it will give you an idea. Cheers!
@dichotomy6838
Жыл бұрын
Thank you!!
@DanielSanchez94
7 ай бұрын
Is it just general practice to avoid implementing smooth scroll on mobile? I've been dabbling with GSAP's SmoothScroller and it seems to work semi okay on mobile devices except iOS, it comes out super janky with pixels glitching everywhere. I spent a few hours yesterday discovering this dilemma 😭@@olivierlarose1
@_justnick
Жыл бұрын
Doesn't this make the entire website client side and make nextjs pointless since you're using "use client" in the page?
@olivierlarose1
Жыл бұрын
Yes it does. This example does not leverage anything from next js but you could easily split your app into client and server components for a production app where you have data fetching and all of that.
@_justnick
Жыл бұрын
@@olivierlarose1 You're right, i just created a small component that renders nothing, it just sets up lm-scroll in the useEffect
@olivierlarose1
Жыл бұрын
@domyzdomy yep perfect💯
@eldi
10 ай бұрын
It doesn't work on mobile.........
@cairamadhan8594
10 ай бұрын
Me to buddy, have u fixed it?
@eldi
10 ай бұрын
@@cairamadhan8594 just abandoned it. fuck locomotive scroll
Пікірлер: 122