Search the Community

I'm trying to create scroll-triggered animations using GSAP's ScrollTrigger plugin in conjunction with SmoothScrollbar. However, despite following the documentation and various examples, I'm unable to get the animations to work as expected. Problem: The animations defined using GSAP's ScrollTrigger plugin are not triggering when scrolling the page with SmoothScrollbar. I've ensured that there are no errors in the console, and I've double-checked the integration of both GSAP and SmoothScrollbar. JavaScript code: import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import SmoothScrollbar from "smooth-scrollbar"; gsap.registerPlugin(ScrollTrigger); document.addEventListener("DOMContentLoaded", function () { const container = document.querySelector(".home-page-wrapper"); const scrollbar = SmoothScrollbar.init(container, { damping: 0.016, renderByPixel: true, effects: true, }); // Update ScrollTrigger on SmoothScrollbar scroll event scrollbar.addListener(ScrollTrigger.update); // Set up ScrollTrigger scroller proxy for SmoothScrollbar ScrollTrigger.scrollerProxy(".home-page-wrapper", { scrollTop(value) { if (arguments.length) { scrollbar.scrollTop = value; } return scrollbar.scrollTop; }, // Add other necessary properties }); // Define the animation gsap.from(".project-grids > .item", { opacity: 0, y: -50, duration: 1, scrollTrigger: { trigger: ".project-grids", start: "top 80%", end: "bottom 20%", scrub: true, }, }); }); Pug code: extends _includes/layout block title title Sample block description meta(name="description" content="") block canonical - const canonicalUrl = "" if canonicalUrl link(rel="canonical", href=canonicalUrl) block content .home-page-wrapper .hero-container .bio-text .projects .project-grids .item-1 .item-2 .item-3 link(rel="stylesheet" href="/styles/pages/home-page.module.min.css") script(src="/js/pages/main-page.bundle.js") scss code: @import "../base.scss"; .home-page-wrapper { width: 100%; height: 100%; overflow-y: hidden !important; .hero-container { width: 100%; height: 100vh; background-color: yellow; display: flex; align-items: center; justify-content: center; } .projects { width: 100%; height: 100vh; background-color: black; .project-grids { display: grid; grid-template-columns: repeat(3, 1fr); // Three columns gap: 20px; // Gap between grid items .item { width: 100%; // Full width of the grid container height: 0; // Initial height, will be set by GSAP animation padding-top: 100%; // Maintain aspect ratio (assuming square items) background-color: aqua; // Background color &:nth-child(odd) { background-color: lightblue; // Alternate background color } } } } } base.scss: @import "./reset.scss"; @import "./fonts.scss"; @import "./variables.scss"; html { height: 100%; } body { height:100%; cursor: default; color: $color-graybase; font-family: "Averta Cyrillic Regular", sans-serif; word-spacing: normal; line-height: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden !important; a { color: inherit; text-decoration: none; } } What I've Tried: Checking for errors in the console. Verifying the integration of GSAP and SmoothScrollbar. Adjusting ScrollTrigger settings and animation properties. Testing the code without SmoothScrollbar (animations work without SmoothScrollbar). Expected Behavior: The animation should trigger when scrolling with SmoothScrollbar, smoothly animating the elements as defined in the GSAP animation. Additional Information: Gulp version: 4.0.2 GSAP version: 3.12.5 SmoothScrollbar version: 8.8.4 Browser: Chrome Version 121.0.6167.140 (Official Build) (64-bit) Operating System: Windows 11

Hi, I use gsap + smooth-scroll (external) and I created a section - when I get there, scrolls to a specific section. A bit of a one page scroll section - but only for one section. The problem is that if you scroll too fast, the section gets stupid (the scroll starts to jump). I suspect it's a smooth-scroll problem. Can someone tell me what im doing wrong?

I have the following code <div class="scrollbar"> <main class="main-container"> <section class="section">1</section> <section class="section">2</section> <section class="section">3</section> <section class="section">4</section> </main> </div> <script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script> .main-container { display: flex; position: relative; height: 100vh; } .section { background-color: #eae8e5; height: 100%; min-width: 100vw; } class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { static pluginName = 'horizontalScroll'; transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta; } const { x, y } = delta; return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, }; } } Scrollbar.use(HorizontalScrollPlugin); const scrollbar = Scrollbar.init(document.querySelector('.scrollbar'), { damping: 0.1, delegateTo: document, alwaysShowTracks: true, }); Scrollbar.detachStyle(); I want it to be fixed on scroll when a block reaches a corner without preventing other blocks from scrolling as in this example https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f Thanks in advance everyone

Hey there, first off: congrats on and even more, thanks for the scrollTrigger Plugin - it's just awesome. I have been using scrollMagic in a project of mine so far, and been re-writing it to use scrollTrigger instead. I love it, since in most cases it is way easier to use and wrap my head around what I need to achieve certain sorts of scroll based animations - great job on that! But I have run into an issue, that probably is rather an edge case, since it is concerning the use of scrollTrigger together with idiotwu' smooth-scrollbar plugin. I know you guys try keeping things in here related to problems related directly to GSAP, but I thought I'd post anyway, since my problem might have something to do with scrollTrigger's performance - not saying it does, though. It's more likely that I am doing something wrong here, I guess. So, I have sections that are being pinned and their contents transformed on the x-axis to make them appear horizontally scrolling. I found, that hooking scrollTrigger up to smooth-scrollbar works in just the same way as it works with scrollMagic; by adding a listener to smooth-scrollbar that refreshes scrollTrigger on the virtual scrolling of smooth-scrollbar. In my project, when I have only one section with that effect, everything runs buttery smooth, but as soon as there is more than one section with the trigger applied, the scrolling suffers drops in fps to below 50 - which makes it pretty much visibly laggy and sort of annoying. I made a pen with a total of 5 horizontal sections, to show, what I mean. https://codepen.io/akapowl/pen/7c21be9a241e0e13b98316c197b617ef This is not the case with scrollMagic - everything staying smooth there. https://codepen.io/akapowl/pen/074d0a380e2a0393b13d0fb57b5be166 So, now I am wondering: Since, if I understood correctly, scrollTrigger makes all the heavy requests on refresh, is it not a good idea, to hook the refresh to the virtual scroll? scrollMagic seems to handle it absolutely fine, so might this be something, scrollTrigger could be improved on? Or am I maybe doing something totally wrong here? Maybe somebody finds the time to look into this. Any input appreciated. Cheers Paul