For best results open demo in new window. See the Pen Page with Smooth Scrolling (finished) by on CodePen. 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. With this lesson there was a lot to cover. Most of the time I want my content to be easily digestible in less than 10 minutes. 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. I hit quite a few snags trying to get it all to work. Secondly, I had no idea about how the third-party JS libraries like Locomotive Scroll worked. First off, I didn’t even really know what smooth scrolling was. With ScrollTrigger and smooth scrolling, it wasn’t so easy for me. 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. The scrollerProxy() docs have a bunch of info and demos on how to enable smooth scrolling. 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. Like most things, it can be abused or used tastefully. 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. Smooth scrolling is accomplished by applying css transforms on a container element instead of using the native scrollbar that controls the scrollTop value. Smooth scrolling allows for sub-pixel scroll updates and often incorporates some easing. In simplest terms, smooth scrolling makes mouse-wheel scrolling on desktop feel as silky smooth as scrolling on mobile devices. Watch the entire video for the full scoop on how to integrate Locomotive Scroll with ScrollTrigger 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. Today we are going to discuss smooth scrolling.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |