Next.js Horizontal Scroll With Gsap ScrollTrigger

[@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.

[@M_code_H]

for real this guy saved me even the gsap documentation didnt mention that

[@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! 😎

[@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 :)

[@aflip8348]

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

[@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!

[@MonirHossainAbdeRabby]

Hey, Thank you so much. Your video is helpfull.

[@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 😎

[@santinomantineo5275]

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

[@asadullah7324]

exactly I need. thank you

[@danielhiebeler1614]

You are a hero!!

[@ivansmiths]

Thank you!!

[@EdoardoGronda]

Dumb question from someone who just started programming, why aren't you using tailwind-css and useGSAP()? Anyways, great tutorial, thank you so much!

[@philmour3465]

amazing, you saved me

[@ivansmiths]

You're welcome 😎

[@maximberest5704]

thanks!

[@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" :)

[@insanethorgaming7664]

Thank you sooooooooo much buddy

[@ayush1344]

Thank you Brother,

[@FransGamingLow]

Thank you very much

[@miraj.]

A BIIIIGGGGG Thank You 🙏 for this

[@ivansmiths]

You're welcome 🙌

[@studyafa7159]

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

[@SubzEye]

Amazing Tutorial! I have one question, why did you choose 2000 as a value for end (end: "2000, top") ? How would I calculate this while designing my UI ?

[@ivansmiths]

Hi! 2000 are the number of pixel that th eanimation will scroll until it finishes. However this code is actually pretty old and not very optimised for most case scenarios as you might have guessed. My portfolio is open source, there you can find a more polished version that calculate the width of the container

[@odia-sanatani]

Thank you so much!

[@cptankit4208]

Thnx man 🔥🫡

[@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!

[@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

[@yogeshmishra-t7r]

Will it work in react.js?

[@TheProfessorMA]

How to make Horizontal scroll and LocomotiveScroll using react ?

[@ivansmiths]

Hey! Unfortunately I've never tried LocomotiveScroll

[@erzhan6121]

How to make this effect vertical

[@ivansmiths]

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

[@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

[@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

[@darveterdarveter4511]

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

[@Ghost-Stories710]

Create more videos create GasP tutorial series