Search the Community

I have noticed that ScrollTrigger briefly switches the scroll-behavior property of my scroller (the html element) from smooth to auto and back as it toggles between isActive states. Is this known/intentional behavior? In my case, it breaks the functionality of a native "back to top" button on the same page because the automated scroll is halted shortly after crossing the isActive threshold. I assumed using GSAPs own ScrollToPlugin would do the trick here but that didn’t help either. Neither did using zenscroll with window.noZensmooth set to true. Any help would be much appreciated. Here is my code. I commented out the code I execute on toggle as it makes no difference to the behavior described above. gsap.to(overlay[0], { scrollTrigger: { trigger: footer[0], start: "top bottom", end: "bottom top", scrub: 1, onToggle: (self) => { if (self.isActive) { // main.addClass("fixed bottom left right"); // spacer.removeClass("hidden"); // overlay.removeClass("hidden"); } else { // main.removeClass("fixed bottom left right"); // spacer.addClass("hidden"); // overlay.addClass("hidden"); } }, }, opacity: 1, });

Hi! I'm running into a problem using scrolltrigger and I would hope anyone can point me into the right direction. I already tried to recreate it locally, but it does not happen there. So it is likely a CSS or third party script interfering. However I'm lost and perhaps someone else had the same problem and could help me out. So I'm using scrolltriggers on this website: https://www.ng-engineering.nl/home/ Same from this page: https://www.ng-engineering.nl/test/ which has almost nothing on it. However every time I resize all the triggers jump to the top of the page, like it does not account for me already having scrolled down. When I resize at the top of the page all triggers get back to the right position. What could I do differently? My current JS code is this: // Wait until DOM is ready document.addEventListener("DOMContentLoaded", function () { // Wait until images, links, fonts, stylesheets, and js are loaded window.addEventListener( "load", function () { // Check if GSAP is defined console.log("local loaded"); if (typeof gsap === "object") { // Register ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); window.addEventListener("resize", function () { ScrollTrigger.refresh(); console.log("ScrollTrigger refreshed due to window resize"); }); let mm = gsap.matchMedia(); //all mm.add("(min-width: 0px)", () => { //end all }); //desktop mm.add("(min-width: 991px)", () => { console.log("GSAP desktop"); const dienstenTl = gsap.timeline({ scrollTrigger: { trigger: "#Cards_diensten", start: "top 80%", toggleActions: "play none none reverse", markers: false, invalidateOnRefresh: true, }, onStart: function () { gsap.set("#Cards_diensten .card", { pointerEvents: "none" }); }, onComplete: function () { gsap.set("#Cards_diensten .card", { pointerEvents: "auto" }); }, }); dienstenTl.to("#Cards_diensten .card", { opacity: 1, y: "0%", duration: 0.3, ease: "power1.inOut", stagger: 0.05, }); }); //mobile mm.add("(max-width: 990px)", () => { console.log("GSAP mobile"); }); //end gsap defined } //end load }, false ); //end dom ready });

As you can see from the demo url, when you scroll down, and click on the "up arrow" on the bottom right corner, scroll to plugin fails to scroll on Firefox. However if you disable the "scroll-behavior: smooth;" css on body element, the scroll works perfectly. http://goodlife.fuelthemes.net/