Next.js Horizontal Scroll With Gsap ScrollTrigger

In this tutorial I show how you can code an horizontal scrolling section using Next.js with Gsap ScrollTrigger plugin.
Note that the code is almost identical if you use plain React.js. For that you just need to import ScrollTrigger from "gsap/ScrollTrigger"
▬▬▬▬▬▬ USEFUL LINKS ▬▬▬▬▬▬
Complete GitHub repo:
github.com/IvanSmiths/next-gs...
Gumroad:
ivansmiths.gumroad.com/l/next...
Copyright free track used for this video:
www.freelofi.com/lofi-yellow/
▬▬▬▬▬▬ WHERE TO FIND ME ▬▬▬▬▬▬
Let`s talk on Twitter!:
/ ivansmiths
My personal portfolio:
www.ivansmiths.com/
I am thrilled by the possibility of having you as a connection on LinkedIn.:
/ ivan-fabbri
▬▬▬▬▬▬ TIMESTAMPS ▬▬▬▬▬▬
00:00 Horizontal scroll demonstration
00:17 Setup next.js project
02:00 Build Hero component
04:25 Build horizontal scroll animation
12:51 Build Footer component

[@cheeky1699]

who knew adding /dist/ the import of scrollTrigger would fix the 2 hours I just spent pulling my hair why it wasn't working. Thank you.

[@warpscore]

This is exactly what I needed, thank you so much! Don't give up on the channel, there's more to come

[@ivansmiths]

You're welcome! 😎

[@SimPwear84]

Simply amazing!! Short, sweet and straight to the point. You did an amazing job. Looking forward to more videos. Subbed!!

[@ivansmiths]

Thank you, much appreciated!

[@aflip8348]

straight forward, thanks, dude! keep up the good work! 🚀

[@sergioortiz6703]

Amazing tutorial, I found countless demos both in react and pure javascript none of them would work properly in NextJS, thank you

[@ivansmiths]

Thank you! Glad it helped :)

[@redirex7770]

Thank you very much! I had an issue and you saved me!

[@philippkretzschmar4653]

Thanks a lot. Exactly what I was looking for.

[@ivansmiths]

You're welcome 😎

[@asadullah7324]

exactly I need. thank you

[@insanethorgaming7664]

Thank you sooooooooo much buddy

[@santinomantineo5275]

Que crack, buenisimo el tutorial, super simple y funciona perfecto muchas gracias!

[@FransGamingLow]

Thank you very much

[@odia-sanatani]

Thank you so much!

[@danielhiebeler1614]

You are a hero!!

[@ivansmiths]

Thank you!!

[@ayush1344]

Thank you Brother,

[@cptankit4208]

Thnx man 🔥🫡

[@philmour3465]

amazing, you saved me

[@ivansmiths]

You're welcome 😎

[@miraj.]

A BIIIIGGGGG Thank You 🙏 for this

[@ivansmiths]

You're welcome 🙌

[@omarjab]

13:30 in quel momento ho capito che eri italiano ahaha comunque davvero ben tutorial, grazie, mi è stato molto utile

[@ivansmiths]

Colto in fragrante :) Grazie per aver visto il video!

[@omarjab]

@@ivansmiths eh si eh ahaha ho anche dato un occhio al tuo portfolio, molto bello :) comunque non vedo l'ora di vedere i prossimi video su gsap e react. purtroppo ce ne sono pochi e la maggior parte sono datati oppure sono molto superficiali

[@ivansmiths]

@@omarjab Grazie ancora! Condivido a pieno quello che dici. Settimana prossima se faccio in tempo dovrebbe uscire un tutorial su come fare degli "image reveal effect" :)

[@jayasaikiran1761]

Hey great tutorial, if possible make a video on while navigating to each page add a loader/page transition using Gsap in Nextjs 13

[@ivansmiths]

Thank you Jayasay! I'm planning a tutorial like this, but in the meanwhile you can check my website, it's open source. There's an animation on page change, maybe it can get you started

[@studyafa7159]

What you have done after Initialising useEffect I dint understood a thing 😢😢

[@user-tv9qb9co2o]

Will it work in react.js?

[@TheProfessorMA]

How to make Horizontal scroll and LocomotiveScroll using react ?

[@ivansmiths]

Hey! Unfortunately I've never tried LocomotiveScroll

[@owl_code]

Hey How fix the error when changing route with next js?

[@ivansmiths]

For fixing this, wrap the whole JSX into a div, or another JSX element. It should work if you check the complete repository of this project

[@CarlosEduardo42]

This is great! Thank you! But why end is "2000 top"? Why 2000 pixels? I don't underestand that.

[@ivansmiths]

You're welcome :) just personal preference, you can set the pixel value based on how much fast/slow you want the animation to be

[@CarlosEduardo42]

@@ivansmiths Thank you again!

[@erzhan6121]

How to make this effect vertical

[@ivansmiths]

I think you just need to animate the y axis instead of the x axis

[@darveterdarveter4511]

4:52 "ES7+ React/Redux/React-Native and blah-blah-blah" 😂

[@Ghost-Stories710]

Create more videos create GasP tutorial series

[@XxbankerboomxX]

How could i pin every section that comes into view?

[@ivansmiths]

Dealing with multiple pins is a bit more tricky... If i remember correctly there should be an example in the official examples of ScrollTrigger. I've never tried multiple pins, sorry!

[@XxbankerboomxX]

@@ivansmiths I figured it out and used a function in the refs of each section that added them to an array, then mapped that array and gave them all scrolltriggers with pins, for anyone else wondering :)

[@ivansmiths]

@@XxbankerboomxX Sound perfectly logical! Glad that you managed to get it working 😎

[@XxbankerboomxX]

@@ivansmiths Btw i enjoyed your gsap videos, looking forward to watching more of them :)

[@ivansmiths]

@@XxbankerboomxX Thank you! I'll be also posting some new stuff soon :)

[@InSaneRoGer112003]

over scrolling in mobile ??

[@InSaneRoGer112003]

its not snapping to the top of section in mobile works fine in desktop what am i doing wrong?

[@ivansmiths]

What you mean by snapping? If you haven`t, you can check the complete GitHub repo of this project, the link is in the description. My example works on mobile, maybe you can find the solution there