Smooth Scrolling with Locomotive Scroll and GSAP ScrollTrigger (and Three JS)

In this video, I show you how you can combine the Locomotive Scroll library with GSAP ScrollTrigger to provide a smooth scrolling experience on all browsers and Operating Systems.

Join the Late Night Coders community to get access to online courses and more:

Github repository for the starter code:

Github repository for the finished project of this video:

====****Video Timestamps****====
00:00 Intro
1:51 Getting starter code and review of existing code
03:31 Add Locomotive Scroll CSS and JS setup in our project
10:38 Setting up the proper connection between GSAP ScrollTrigger and Locomotive Scroll
17:08 Destroying Locomotive Scroll properties needed for a Single Page Application
26:50 Final thoughts and outro

✅ 🆓 Please make sure to subscribe to the channel and hit the notification bell to be the first to know whenever I upload new videos.⚠️

Other video tutorials:

Useful links:

Finally, please leave a comment below and let me know if you have any questions or you have any topics in mind that would like me to make videos for.

Happy coding 🙂

[andrewii]

Can you help me to set up with Angular really confused

[alieninsectbass]

Amazing tutorial! I do have one question tho--GSAP ScrollTrigger's pinning feature is not working correctly on my end! It doesn't pin the section and let it scroll. However, if I disable Locomotive Scroll, pinning works properly. I also set up anchor links with Locomotive Scroll and GSAP so those work correctly, but pinning is giving me problems. How do I solve this?