Today we are going to discuss smooth scrolling. During the development of ScrollTrigger, smooth scrolling was one of the most requested features as it has the ability to give you scroll-driven animations a MUCH smoother feel.
Watch the entire video for the full scoop on how to integrate Locomotive Scroll with ScrollTrigger
In simplest terms, smooth scrolling makes mouse-wheel scrolling on desktop feel as silky smooth as scrolling on mobile devices. Smooth scrolling allows for sub-pixel scroll updates and often incorporates some easing.
Smooth scrolling is accomplished by applying css transforms on a container element instead of using the native scrollbar that controls the scrollTop value.
GreenSock was adamant that ScrollTrigger should not hi-jack the browser’s native scroll functionality, as scroll-jacking is a very controversial practice among developers and users. Like most things, it can be abused or used tastefully.
Thankfully, GreenSock has added functionality via ScrollTrigger.scrollerProxy() to enable ScrollTrigger to work with smooth scrolling libraries so that you as the developer have the options you need.
The scrollerProxy() docs have a bunch of info and demos on how to enable smooth scrolling. For 99% of what GreenSock does there is usually a single method or line of code you can copy and paste to easily get magical results.
With ScrollTrigger and smooth scrolling, it wasn’t so easy for me. First off, I didn’t even really know what smooth scrolling was. Secondly, I had no idea about how the third-party JS libraries like Locomotive Scroll worked.
I hit quite a few snags trying to get it all to work. This video and demo below are my attempt to save you an hour or two of time and frustration and help you have a better understanding of how it all works.
Most of the time I want my content to be easily digestible in less than 10 minutes. With this lesson there was a lot to cover. I’m hoping though that if you put in the time to watch the whole lesson you will get a lot of value out of it.
Demo
For best results open demo in new window.
Resources
- Locomotive Scroll
- scrollerProxy() docs (MUST READ)
- GreenSock’s Locomotive Scroll demo
- ScrollJacking: The Good, The Bad, and the Ugly
Homework
I strongly encourage you to start a project from scratch and try to implement smooth scrolling so that you have your own template to work off of. Remember to load that css file for Locomotive Scroll! 🙂
ScrollTrigger Express
Want to get up and running quickly with ScrollTrigger?
My course ScrollTrigger Express will guide you through the key features of GreenSock’s ScrollTrigger so that you can add a whole new level of animated interactivity to your webpages. Learn everything from the basics to responsive layouts with unique animations for different breakpoints!
I’ll train your through a series of modular, highly focused video lessons with loads of demos for you to explore.
Enroll in ScrollTrigger Express as part of my comprehensive Creative Coding Club Course Bundle.