Build a Smooth Scroll Landing Page using Nextjs, GSAP, Locomotive Scroll v5

A website tutorial on how to make a one pager landing page with a smooth scroll using Nextjs, GSAP and Locomotive Scroll v5

00:00 Intro
00:25 History of the smooth scroll
01:34 App breakdown
2:14 Page Component
3:28 Intro component
10:23 Description Component
13:31 Projects Component
19:51 Outro

Thanks for watching!

#react #nextjs #awwwards #gsap

[samuelosei]

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

[igawisniewska]

Was legit waiting for this tutorial since I saw that you posted the write up on your blog. Thanks Oli xx

[veipper]

At this point you're just reading my mind. Thanks for the tutorial bro don't ever stop making content!

[shlokgupta]

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.

[shubhammaurya]

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

[andrealvaradocampos]

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

[shreetimohapatra]

I demand more project tutorials!!!!

This is so good man!

[magframed]

Amazing content! Need these kind of tutorials.

[mykhaylotymofyeyev]

Lenis is 🔥🔥 I’ve introduced it in the company where I work projects, great library. Awesome video too, great work 🤘🏻👏🏻

[faisal_dev]

hands down the best channel on earth !!

[Diego_Cabrera]

Seriously amazing content man. Keep it up

[mindbodyps]

Bro Just amazing, keep making video, this is very helpful

[BMikel]

You are talent. Subscribed without hesitation

[dawid_dahl]

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. 🙏🏻

[dickimaulanayusuf]

AMAZING !, but the way you say "easy" that make my hands goosebump 😆

[learncode]

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 😊😇😇

[verbs-otier-ru]

At least I can do is subscribe and like this video. That was a great job you did. Thank you!

[wassup]

you are awesome, please continue uploading, your new sub

[francocaporaletti]

thank you for this! I would like you to make part 2 of this tutorial making it responsive it would be insane!

[SomeThinkingOFF]

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(); // <- cleanup!

As it will be helpful to overcome React 18's "strict" mode. And will work your animation. 👍