gsap GSAP ScrollTrigger animation not working with SmoothScrollbar

[Aditya Sutar]

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.

1. Verifying the integration of GSAP and SmoothScrollbar.
2. Adjusting ScrollTrigger settings and animation properties.
3. 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

See the Pen by pen?template=vYPjgdx (@pen?template=vYPjgdx) on CodePen

Edited February 2 by Aditya Sutar
I mistakenly included inaccurate information and subsequently corrected it.

[akapowl]

 

Hello there.

Here are the problems in your pen that are responsible for it not working:
 

1. You are gettting an error in console - there is no such thing as SmoothScrollbar.init() - it is Scrollbar.init() instead; nothing related to GSAP.
   
   Also, as far as i know, smooth-scrollbar does not have an 'effects' property; so that is probably redundant, too. I would suggest removing that to prevent any possible problems that might arise from that.
    
2. You don't have a layout/setup that would work with smooth-scrollbar to begin with; you'll need to apply proper CSS styling on the body and the container you're going to initialize smooth-scrollbar on for it to work; nothing GSAP related.
    
3. In CSS as well as in JS you are targetting elements with the class '.item' but you don't have any such elements in your HTML, you only have '.item-1', '.item-2' and '.item-3'; nothing GSAP related.
    
4. Your .item element has a height of 0 set via CSS. Although in a comment you say you're going to set its height via GSAP, you never do.
   Again, less of a GSAP specific problem.
   
   And finally:
    
5. You are not declaring a specified scroller element in your ScrollTrigger, which you will have to do, as smooth-scrollbar does not run on the body element. This one is something GSAP / ST specific; 
   
   For clarity, see the smooth-scrollbar example and documentation on
   
   https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() 

 

Since a lot of your problems arise from not properly handling smooth-scrollbar in the first place, I would suggest having a thorough look at their documentation. Smooth-Scrollbar is not a GreenSock product, so you really shouldn't expect to get support for it in the GSAP forum.

I implemented the raw basics to the fork of your pen below - and it works as it should.

I give no guarantee that it is bullet proof with regard to smooth-scrollbar though; you should check on all that yourself.

https://idiotwu.github.io/smooth-scrollbar/

https://github.com/idiotWu/smooth-scrollbar
https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md

Hope this will help get you going in the right direction though. Good luck!

See the Pen KKERaYE by akapowl (@akapowl) on CodePen

[Aditya Sutar]

Thank you for resolving the uncertainties. 🙌