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