I've been having the same issue with one of my components and was looking forward for the fix.
However, with Webpack 4 and latest gsap 3.4.4 release installed, when I set ScrollTrigger.config({ limitCallbacks: true }); it throws a console error:
Uncaught (in promise) TypeError: gsap_ScrollTrigger__WEBPACK_IMPORTED_MODULE_3__.ScrollTrigger.config is not a function
This is an overview of my implementation:
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.core.globals("ScrollTrigger", ScrollTrigger);
const SITE_HEADER_HEIGHT = document.querySelector(".js-site-header")
.offsetHeight;
export default class StackRevealer {
constructor(el) {
this.DOM = {};
this.DOM.el = el;
this.DOM.navigation = this.DOM.el.querySelector(
".js-stack-revealer-trigger"
);
this.DOM.content = this.DOM.el.querySelector(".js-stack-revealer-content");
this.DOM.headerLinks = Array.from(
this.DOM.el.querySelectorAll(".js-stack-revealer-header-link")
);
this.DOM.items = Array.from(
this.DOM.el.querySelectorAll(".js-stack-revealer-item")
);
this.pinLinks();
}
pinLinks() {
const triggersBottomPosition =
this.DOM.navigation.offsetHeight + SITE_HEADER_HEIGHT;
ScrollTrigger.config({ limitCallbacks: true });
ScrollTrigger.create({
aniticipatePin: 2,
trigger: this.DOM.content,
id: "stack-revealer-pinned-links",
start: () => "top " + SITE_HEADER_HEIGHT,
end: () => "bottom " + triggersBottomPosition,
pin: this.DOM.navigation,
scrub: true
});
}
}
I have also tried to set ScrollTrigger.config({...}) right after gsap.registerPlugin(...) but with no success...same error.
Is this an issue with ScrollTrigger.config() when using Webpack or am I missing something?