Gsap smooth scroll. Tried fixing the CSS and also the JS. 3D renders from Unsplash. Now let’s get started. What happens is: the scrollbar can not move to the top of the actual document. scrollerProxy () to keep ScrollTrigger and Smooth Scrollbar in sync. It uses native scroll technology to avoid most of the accessibility issues that plague other smooth-scrolling libraries. See the Pen GSAP Draggable and ScrollTrigger timeline [Simple 1] by Michelle Barker (@michellebarker) on CodePen. Nov 29, 2022 · Solution 1 : don't work, the latest beta have the same issue, runing my code with versions before 3. // don't let it go beyond the maximum scrollable area. 18. I'm trying to figure out why adding a fixed height to the body is making that happen. Hi GSAP Team, Could i get assistance in making the smooth sticky header scrolling. Jun 6, 2018 · Smooth scrolling from one page to another using GSAP. The main goal is to achieve smoothness. Like in the example the image, the title and the content all moving to different scroll speeds. When you don't use the body as the scroller but a dedicated Jun 16, 2017 · I'm not against scrolling animations or parallaxing. 0. Jul 31, 2020 · Here is a suggested solution with the use of smooth-scrollbar (see bottom of this post) @karaulovskin The thing with smooth-scrolling libraries, like smooth-scrollbar (don't know about ASScroll - but from what I have read somewhere in this forum, I think it might be easier to handle) is, that they pretty much change everything about the browser-implemented scrolling. ScrollTrigger is an official GreenSock plugin for GSAP. js. Any ideas would be great, thanks! Nov 12, 2020 · I have the same issue of text flickering on scroll in the website https://jovial-fox-cfe5c4. Posted August 14, 2019. module. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. I tried some AI suggestions but it does not work. You can then combine this with something like Jack shared above to get the horizontal scrolling panel. GSAP should do a paid smooth-scroll plugin for mouse-wheels, they'd make a small fortune Thanks for the above. GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. 174. 5 is halfway scrolled. this pen explores how gsap ScrollTrigger's scroller 1. All it does it animate values. style. Finally figured out how to do those "fixed" background image scroll thingys, so here's a smooth scrolled section thing with some randomized letter opacity animations. Jun 22, 2021 · 10. In the homepage if you start to scroll, in the section after the landing section you can see the white text in the red background flickers as you scroll. 10! The new ScrollSmoother plugin makes smooth scrolling easy and accessible, and the Apr 19, 2019 · 4. let smoother = ScrollSmoother. maxScroll(window), About External Resources. getVelocity(); Previous. currentTime is using scroll speed to update video. This thread was started before GSAP 3 was released. Posted. When you scroll down to the page animation feels like laggy or working a bit slowly specially if you scroll faster you will see it stuck into the page sometimes. smoothScrollOptions = {. Instance settings. Jul 13, 2022 · As of now, if you press the tab key three times (to get to box C), you'll see that the scrollbar doesn't update and there is no smooth scrolling. querySelector (". Exclusively for Club Greensock members - ScrollSmoother brings easily configurable Jun 25, 2023 · The page component is the parent of the other 3 components. Using Locomotive. We really try not to over-reach. Mar 20, 2020 · And it's all in the same comfy GSAP ecosystem. I am using Greensock animation for smooth scroll clicking on the menu. Subscribe. Nov 27, 2017 · In the demo below, just scroll down very slowly. ScrollTrigger, InertiaPlugin, SplitText, CustomEase. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. Apr 29, 2021 · The fundamental problem was that the scrollerProxy's setter needed to ALSO set the actual scroll position of the page (not just the "fake" content scroll) so that they're synchronized, but doing so directly would create a funky loop because the main ScrollTrigger is set up to basically smooth out the "real" scroll position, thus when we set it Jan 18, 2016 · There isn't much GSAP can do to help how Flash chooses to render your animations. You need to be a member in order to leave a comment Oct 10, 2022 · It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. html from the GSAP-ScrollTrigger-Intro folder. It's because the tween that makes it look like smooth scrolling is actually moving the container around. Give it a try! I'm sure you'll come to love it. gsap; slidetoplugin; By anujibin February 27, 2020 in GSAP. 11 works fine (I tested with the 3. // JavaScript Document // This script will scroll to an anchor link on a page from any wordpress menu item with an added class of scrolltolink // the link Sep 14, 2023 · That most likely has to do with the calculations being made for your smooth scroll functionality and the pin space added by GSAP in order to pin the horizontal section. create({. to(smoother, {. Phani. 1. Feb 4, 2021 · In short: No, there is no GSAP pre-built stand-alone solution for smooth-scrolling. import styles from '. 885. But ScrollTrigger is not built to do scrolljacking like that in the first place and doing so will likely come . What I wanted to do it replicate the same smooth scrolling that's on the mousewheel, onto the scrollbar on the right hand side. 2. gsap. The mousewheel events fire very often so you my want make sure you aren't creating new tweens all the time or scroll 30 sections in the course of 3 seconds. const locoMotive = () => {. 7. 30K views 1 year ago. Feb 8, 2023 · Definitely avoid animating anything with CSS that you're also animating with GSAP. Jul 31, 2020 · Hi, Smooth Scrollbar can work with ScrollTrigger. You might also see these threads for more info about this subject: 2. Jan 28, 2021 · If you need smooth scrolling I recommend using a more full smooth scrolling library. scrollTo( { top: 100, left: 100, behavior: 'smooth' }); In my opinion, this would even be the cleaner solution, but in our context it does not work as desired. The problem is I don't know what Dec 15, 2023 · Initiating Smooth Scroll: I need guidance on correctly initiating smooth scroll, considering I'm using setTimeout and multiple GSAP tweens. Red color is header which needs to behave as sticky header. ScrollTrigger, Flip. i used smooth scroll plugin from gsap. Big picture is you'd have a variable to keep track of the scroll position and update that variable when the user scrolls or a button is clicked. Once the page has been scrolled to the far right of the 6th section, enable vertical scrolling again (but this time shifted over by 100vw Want to customize the animation to that scroll position? Use the offset () method to find the correct position, and feed it to a GSAP tween like: gsap. ScrollTrigger. We don't really support ScrollMagic here and I'm not familiar with how it works 19. Pinning Elements: I'm trying to pin elements in a way that replicates fixed positions, but I encounter a jumping effect. scrollTrigger. Prerequisites: NPM & Node. I'd just set it with the defaults so you don't have to add that to every ScrollTrigger. 1. The ScrollTrigger instance that ScrollSmoother created internally to manage the smooth scrolling effect of the page. If you need to do scroll jacking, just hide the scroll bar. As I understand it happens on less powerful computers. just playing with greensock animation library and getting familiar with its api and idiosyncracies. It also manages the smooth scroll which is very simply done with Locomotive Scroll v5. js projects. Setting Up the Next. I just had to make something similar for a wordpress site. If you are seeing the same results with GSAP and other ActionScript techniques, I'm fairly confident you have just hitting a limitation of Flash. Using it, you can have complete control to define where your scroll animations start and end, animate anything (WebGL, canvas, SVG, DOM, whatever) on scroll, pin elements Mar 10, 2022 · isProxyScrolling = true; // otherwise, if snapping was applied (or anything that attempted to SET the scroll proxy's scroll position), we'd set the scroll here which would then (on the next tick) update the content tween/ScrollTrigger which would try to smoothly animate to that new value, thus the scrub tween would impede the progress. I have the most common setup for scrolling and there are also several swiper sliders on the page. Registering a plugin ensures that it works smoothly and prevents tree-shaking issues in build Select all elements with the class "panel" and stores them in an array called sections. Quite the opposite. create({}); let nativeScrollVelocity = smoother. php. offset ('#formsection', 'top top'), duration: 3, ease: 'power4. Dec 17, 2023 · GSAP is used to animate anything that can be accessed with JavaScript. smooth"). Useless if lerp defined. Unless you need some of the advanced functionality in the ScrollMagic library, a simpler approach would be to use the native IntersectionObserver API to listen for when elements get scrolled into view, and then call your GreenSock animations when Mar 3, 2022 · Hi, I've been trying to figure out a way to add an active class to my smooth scroll container while scrolling is being done. It's a great library. Before diving into the implementation, let’s set up our Next. php page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. Though if I use the scroll bar, the background images do not move, only the image in the foreground. min(. Animate the xPercent property of the sections. js, Gsap ScrollTrigger & some custom Javascript. Sep 30, 2020 · How you encode the video has huge implications on the playback ability of video. php, terms. Mar 27, 2023 · That's relatively easy to do, of course, but the smoothing just knows that it must smooth the "catch up" to that new (native) scroll position. I've been trying to find a smooth scrolling solution for the entire page without sacrificing accessibility, especially on mobile devices. Feel free to copy the component to your clipboard and paste it into your site to start using it. to (Smooth, {scrollTop: Smooth. The issues include: Pinned elements jumping or resizing once pinned. Nov 13, 2015 · I've made a parallax website and added smooth scrolling to it with the mousewheel, and that all works fine. When I remove all the sliders, the lags disappear. Jan 28, 2021 · It’s tightly integrated with all the other animation possibilities of GSAP (e. However it's a quite expensive one. scrollerProxy () method can help it be hooked up to smooth scrolling libraries with ease. But I am not able to getting it. So I assume the problem don't come from Lenis not returning the good scroll value, since it works fine with older versions of gsap. Look at the demo Jonathan posted above. May 2, 2022 · window. You can apply CSS to your Pen from any stylesheet on the web. May 5, 2017 · Remove the commenting and then run it and notice the parallax scrolling animation is not smooth anymore. I have three pages which are menu. damping: 0. Sep 22, 2021 · Well the code you posted above is not from the ScrollTrigger-native smooth-scrolling approach - but trying to use smooth-scrollbar without loading their script. My question is : Could we use the best of both world by using lenis to handle smooth scroll and keep the ability to use data-speed and others data attributes provided by SmoothScroller to create awesome parallax rapidly. Jun 2, 2020 · Posted June 2, 2020. The easing function to use for the scroll animation, our default is custom but you can pick one from Easings. If I don't specify the scroller with scrollerProxy (and "scroller:" in gsap animation code), the start and end values don't exactly match (they almost match from what I can see) and whole website gets choppy and framrate drops a lot. smooth: 1, onUpdate: (self) => console. scrollTop: Math. with ScrollTrigger's pinning. addEventListener ('click', => {gsap. 3 yr ZachSaucier changed the title to Scrub through video smoothly - ScrollTrigger. php`. In your code editor, open index. Specify the easing function for the animation. To use it with ScrollTrigger you should make use of . net. ScrollSmoother is a members-only benefit of Club GSAP but you're welcome to use a Feb 9, 2023 · Also your initial 3D animation should be inside a container with overflow hidden, since it is also creating some extra vertical scrolling and (I presume) unwanted horizontal scrolling. And calculating the outer window height in javascript didn't help 😕. Myself and many others around here would warmly encourage you to move away from Flash. Please take a look at the attached example. <Scrollerref={scrollRef}> // this wrapper component with smooth scroll and scrollTrigger setUp <Headerscroller={scrollRef}/> // component need to animate in scroll </Scroller>. If you prefer to use a different library for smooth scrolling, that's fine but we can't support 3rd party libraries here. When the website is loaded the smooth scroll works as expected, the scrollbar start at the top of the document (start-picture. Posted November 18, 2022. We are trying to figure out a solution for the smoothly snapping effect. Please help me on this one. Jan 3, 2022 · Calling scroll() also respects our users’ motion preferences — users with a reduced-motion preference will be jumped to the section instead of smoothly scrolled. link/templates 🍉 Portfolio The progress value of the overall page scroll where 0 is at the very top and 1 is at the very bottom and 0. We didn't build ScrollTrigger to do scroll-jacking (which is what smooth scrolling requires), but it's entirely possible to leverage it to create similar effects. Preview index. I am really stuck into this from last couple of days. See the Pen gOgWELo by GreenSock ( @GreenSock) on CodePen. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Aug 14, 2019 · Moderators. Mar 21, 2021 · pinType: document. log("progress", self. And having that class removed as soon as I stop scrolling. smooth-scroll"}) See the Pen abVxRqm by GreenSock ( @GreenSock) on CodePen. Here are some suggestions: Make sure you're loading ScrollTrigger, ScrollSmoother, and the main GSAP file. I'm betting that the issue is caused by conflicting positions of the scroll position. Jul 23, 2020 · Hi Federica, we went through GSAP only smooth scrolling in another forum thread. I actually do a lot of that stuff but with my own scroll magic. Currently, on scroll, it slows down and after a while jumps to the ne Feb 24, 2018 · Just to clarify, I'm pretty sure GSAP doesn't **ever** cancel scrolling that's initiated outside of GSAP. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling. By 440design July 11, 2019 in GSAP. 17 minutes ago, iDad5 said: Äh - thinking of it what kink of fairy-dust is this, you're using @Cassie 'scroll-behavior: smooth' is according to the thread set directly on the Jan 20, 2020 · While that's acceptable on desktop (since it's manually triggered), triggering a resize each time the user changes the scroll direction on mobile (ie an automatic window resize) would make for a frustrating user experience on mobile. I particularly like how they have a mistakes section with ways you can screw it up. Thank you for all of your hard work. That's it. 0 Jul 24, 2019 · It sounds like all you're needing is to fire some animations when elements get scrolled into view. css'. netlify. There's actually no content being scrolled, yet the scroll bar behaves normally, even with touch. Thanks. Now I am on `index. Oct 9, 2023 · Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. . 4 and it's perfect). Apr 26, 2020 · Trying to do a video scroller that instead of using scroll position to update video. This is a smooth scrolling effect for Framer, which uses Lenis under the hood. Maybe try using the refresh event handler to update or re-create your smooth scroll: Apr 16, 2021 · Hey all! We have used gsap in a couple of projects. progress. Feb 3, 2024 · Smooth scrolling is causing extra pages to scroll at the end unexpectedly. scrollerProxy (). This is more related with CSS than GSAP actually and is a bit beyond the scope of the help we can provide in this free forums. Feb 28, 2022 · Hello, I want to add an effect like this to the project, but it doesn't work when I use it with smooth scroll. Just copy-pasting the const won't get you far for different reasons. when #formsection is taller than the height of the screen ( 100vh ) the code above is working as expected but when it is Jan 28, 2020 · 174. Normal effect; See the Pen rNzyRZq by GreenSock (@GreenSock) on CodePen See the Pen LYOgBjZ by sukruemanet (@sukruemanet) on CodePen Aug 26, 2016 · Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic. Results is smoother using playbackRate, BUT the Mar 4, 2020 · Alternatively you could do both the smooth scroll and scrolling to position using GSAP by way of a proxy. Hey ScrollTrigger, whenever you want to get or set the scrollTop on the body, use these methods instead. May 12, 2021 · Yes and no. Everywhere; This Forum; This Topic; Topics; Members; Smooth Page Scrolling. Aug 8, 2017 · Chrome when using a normal mouse/mouse wheel is so horrendously juddery when scrolling these days. js my goal is to achieve smooth scroll to the bottom of the footer (that works) and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. We created a ScrollTrigger method to make it possible to use 3rd party Mar 6, 2023 · I prefer the vision of lenis library that apply smooth to the native scroll. 3. Yes, you only have to set pinType to 'transform' when using the body as the scroller, because by default when the body is the scroller, ScrollTrigger will use 'fixed' for the pinType. GreenSockLearning. GreenSock's own ScrollSmoother is a smooth-scrolling plugin built on top of ScrollTrigger, so it is totally integrated and super easy to use. For some reason, my wordpress site plays smooth scrolling at 10-25 fps. I'm not sure if it is a GSAP issue or a ScrollMagic issue, or maybe it can be solved with the right CSS. 39, last published: 10 days ago. The orientation of the scrolling. ScrollSmoother is very nicely integrated with the GSAP ecosystem. html in Chrome. Now we’re Jul 11, 2019 · Tweenmax smooth scrolling without Rubber-band effect. You could for example leverage ScrollTrigger though, to get that smooth-scrolling effect, like @ihatetomatoes showed in these threads here for example. Sep 22, 2023 · Getting Started. Posted June 22, 2021. You would still need to add quite bit of logic. "none" means a linear scroll, resulting in constant speed as you scroll. animating a timeline based on scroll position). Jul 14, 2014 · Warning: Please note. What I've come up with so far is to add the class with the onUpdate() callback and then remove it using onScrubComplete() May 9, 2020 · GSAP ; Smooth Page Scrolling Search Community. They’ve got docs and a bunch of examples. Together, they form a formidable duo to enhance your Next. 6K subscribers. playbackRate. It detects the elements in the viewport and animates them with custom options. CMS Gallery Slideshow in Framer. About External Resources. We provide a few demos that use different smooth scrolling libraries in the scrollerProxy docs . ScrollToPlugin just checks to see if something **outside of itself** changes the scroll position while tweening, and if so, it'll kill that part of the tween. js Environment. Start using @studio-freight/lenis in your project by running `npm i @studio-freight/lenis`. Initiate a GSAP animation that targets the sections (panels) for horizontal scrolling. One of the solutions I found was GSAP's ScrollSmoother plugin. 'use client'; 2. See the Pen MRGyXq by phaneendravvk ( @phaneendravvk) on CodePen. And have a look at this pen for a smooth scrolling solution together with scrollTrigger. ScrollMagic is telling it one thing while your onScroll function is telling it something else. This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin. registerPlugin(ScrollTrigger); Nov 16, 2022 · The automatically assigned class name of has-smooth-scroll on the page’s html tag needs a backface-visibility of hidden and a transform of translateZ(0) Gsap Scroll Animation. You can explore the source code, documentation and latest releases on GitHub. Emily. Mar 31, 2022 · Introducing ScrollSmoother for GSAP. Every project should do that. 1 Link to comment Mar 30, 2022 · Cassie Evans joins us to show us the new features that come with GSAP 3. Hey rulloliver and welcome to the GreenSock forums. I know is far from being the react-way, but that would definitely pinpoint the issue to the DOM not being ready when the GSAP code is executed. So if the native scroll position is at 1000px (let's say that's the bottom) and then you suddenly change it to be at 1px (to loop it), ScrollSmoother says "okay, I better smooth that out going all the Oct 27, 2020 · Welcome to the forums @leomaubert With the right logic it sure is possible. js; React JS; Approach to create GreenSock ScollTrigger: Create a new functional component and then import GSAP and ScrollTrigger and register the plugin. 2k. This value will animate during the smooth scrolling and end when the onStop fires. I know this topic isn't really related to GSAP, so i wont be bothering anyone about this new issue, but thank you again for your help 🙂. Have two videos, one forward and one in reverse, and depending on scroll direction it switches between them using 'autoAlpha'. So you will probably have to find a different way to achieve that effect, like e. php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. app/ . The ScrollTrigger-native approach does contain detailed comments in the JS for how to set up things for it to work - if you follow those ( and that includes the HTML markup and Jul 11, 2021 · I'm trying to get the custom scroll from my codepen to work with scrolltrigger. And when it updates, you also update the scroll position of the page. This demo provides some info about how you should encode your video. As you scroll, your mouse goes over lots of stuff, so you're triggering stuff quite a bit (expensive). Dec 6, 2023 · GSAP is a robust tool for creating high-performance animations, including the parallax effect. you will see how it triggers a scrollTo tween. GSAP - core. /page. Open that folder in your code editor if it allows you to (like Visual Studio Code does). Hey graphsynergie and welcome to the forums, Neither of your examples seem to make use of GSAP. Here is the final demo. And no, because you won't leave it as pinType: 'fixed' for a dedicated scroll-container. Now I am on index. No May 17, 2022 · Animation not working perfectly. Posted January 28, 2020. With that being said, Blake here on the forums has an infamous thread about smooth scrolling that you can check out if you want to learn more about how to implement smooth scrolling with GSAP. Posted April 19, 2019. I've been doing further research, and I think it's going to be more of a long-term learning curve to get that type of effect :). 10. Apr 15, 2021 · 1. Below is the code: Nov 18, 2022 · 22. Jul 2, 2017 · That is smooth scroll the whole page content with TweenMax but having different scroll speed on different elements. import { useEffect } from 'react'; 3. See the Pen PoZLpbp by ihatetomatoes (@ihatetomatoes) on CodePen Oct 7, 2019 · Limit the original scroll section to the bottom of the 5th section. page. Hi @futuris, Lenis run in native browser scroll for smooth scrolling, so there will be no issue using ScrollTrigger as combo, I have tested it with trigger, pin, scrub, everything works fine. g. Aug 16, 2022 · button. I have three pages which are `menu. Sep 18, 2022 · Create an account or sign in to comment. May 12, 2021 · Another alternative would be to create a setTimeout and wait for the smooth scrollbar to be completely created before creating the scroll trigger instance. The duration of scroll animation (in seconds). These forums really try to stay focussed on GSAP specific questions and this is more of a general logic thing in combination with how a 3rd party smooth-scrolling library works, but here are some tips: Apr 1, 2022 · Smooth Scroller is awesome thank you GSAP! Question: I have a set of 6 boxes that form two rows, and since there are two rows of elements I am trying to figure out if there is a way to control the position effects of smooth scroller when we are scrolling back up. For this exercise we’ll be working with the GSAP-ScrollTrigger-Intro folder located in Desktop > Class Files > JavaScript Class. There are 42 other projects in the npm registry using @studio-freight/lenis. I want to do this for all pages's elements. Jun 22, 2020 · ScrollTrigger. 1 minute ago, ZachSaucier said: Yep. Feb 27, 2020 · Smooth scroll with scrollbar. Jun 7, 2018 · Hello, I am using Greensock animation for smooth scroll clicking on the menu. Explore All Showcases. png) 2. Jan 5, 2023 · It's only available for Club GreenSock members, though ("Shockingly Green" and higher). You seem to have a lot of mouse/pointer events. When I inspect the webpage shows "has-scroll-init+has-scroll-smooth". This script will scroll to an item if it is on the same page otherwise href links to another page as normal. It has a long list of features and has the most easy to use API of any scroll library (at least to me). See Codepen below. You need to use the ScrollTrigger. Some information, especially the syntax, may be out of date for GSAP 3. 5k. 👋 Check out my latest templates - https://robn. I'm currently learning and using Framer Motion for my animations in React and I couldn't find any good smooth Oct 23, 2020 · Ok, it works better now, but If I scroll fast, down page, my divs take a little time to appear I guess there is a timing problem, when I'm in Full Page View on the Pen, scrollTrigger runs but my page stay empty Jun 1, 2019 · Posted June 7, 2019. Mar 7, 2022 · You can use selector text like "#elementID" or the element itself. Moderator Tag. transform ? "transform": "fixed" and removing all the locomotive-scroll attributes such as "data-scroll data-scroll-speed="-1" but no luck. Here is a simplified code example how it should be done. I scroll a bit down on the document and then I minimize/resize it. php, index. Oct 3, 2020 · It ends up happening that this will only work when you change the browser size. By Dovisally May 9, 2020 in Oct 30, 2022 · hi. ScrollSmoother. No issue on the index page. js environment. Here's an example with your code using Locomotive Scroll: Jun 12, 2022 · Assuming that position: sticky is a hybrid of position relative and fixed, I suppose the same that applies to fixed elements will apply to sticky elements in a smooth-scrolling scenario with transforms on a parent container. progress), }); Previous. inOut'})}) The problem is that the #formsection can be taller or smaller than 100vh . Locomotive Scroll is a JavaScript library that allows you to create smooth and parallax scrolling effects on your web pages. Mar 26, 2022 · 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 Lenis is a smooth scroll library to normalize and smooth the scrolling experience across devices. defaults( { scroller:". . You've got mix-blend-mode: difference in your CSS on the mouse follower. When it is at that limit, if the user continues to scroll, disable the original scroll behavior and start scrolling horizontally instead. Aug 12, 2020 · GSAP has its own official scroll plugin called ScrollTrigger that has way more features, a sleeker API, and a smaller file size! Its . Can be vertical or horizontal. Latest version: 1. 21. roqznkemizbbgzeazmob