I am developing using Local WP with Sage 10, Acorn/Bud and yarn. I installed GSAP and scrollTrigger using yarn. Everything is working fine except for one of my functions. When I run ‘yarn build’ a section I have pinning (function below), no longer has proper pin spacing, but it works fine with ‘yarn dev’. Am I configuring something wrong? Do I need to add something to my bud.config?
function stickySlider() {
// HORIZONTAL SCROLL PIN
const stickySlider = document.querySelector('#panels');
// Check if the .main-hero block exists on the page
if (stickySlider) {
const panelsContainer = document.querySelector("#panels");
const panels = gsap.utils.toArray(".panel");
const anchors = document.querySelectorAll("nav ul li .anchor");
// Set up the horizontal scrolling
const horizontalScroll = gsap.to(panelsContainer, {
xPercent: -100 + (100 / panels.length),
ease: 'none',
scrollTrigger: {
trigger: "#panels",
start: "top top",
scrub: true,
// snap: 1 / (panels.length - 1),
pin: ".sticky-slider-block",
anticipatePin: 1,
pinSpacing: true,
end: () => "+=" + (panelsContainer.offsetWidth - innerWidth),
// end: () => "+=" + (panelsContainer.offsetWidth - window.innerWidth),
onUpdate: function () {
// Loop through the panels and check if each one is in view
panels.forEach((panel, index) => {
const bounds = panel.getBoundingClientRect();
if (bounds.left >= 0 && bounds.right <= window.innerWidth) {
// Add the "active" class to the corresponding anchor
anchors.forEach((anchor) => {
if (anchor.getAttribute("href") === `#panel-${index + 1}`) {
anchor.classList.add("active");
// Trigger animation for the corresponding .animated-underline element
gsap.to(`#panel-${index + 1} .animated-underline`, {
backgroundSize: '100% 100%',
duration: 3,
delay: 0,
// ease: 'Circ.easeOut',
});
} else {
anchor.classList.remove("active");
}
});
}
});
},
}
});
}
}
I am importing like this:
import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger.js";
import {Observer} from "gsap/Observer.js";
import {ScrollToPlugin} from "gsap/ScrollToPlugin.js";
import {ScrollSmoother} from "gsap/ScrollSmoother.js";
gsap.registerPlugin(ScrollTrigger, Observer, ScrollToPlugin, ScrollSmoother);
/**
* Application entrypoint
*/
domReady(async () => {
stickySlider();
});
My bud.config.js
/**
* Build configuration
*
* @see {@link https://roots.io/docs/sage/ sage documentation}
* @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
*
* @typedef {import('@roots/bud').Bud} Bud
* @param {Bud} app
*/
export default async (app) => {
/**
* Application entrypoints
* @see {@link https://bud.js.org/docs/bud.entry/}
*/
app
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
/**
* Directory contents to be included in the compilation
* @see {@link https://bud.js.org/docs/bud.assets/}
*/
.assets(['images', 'fonts'])
/**
* Matched files trigger a page reload when modified
* @see {@link https://bud.js.org/docs/bud.watch/}
*/
.watch(['resources/views', 'app'])
/**
* Proxy origin (`WP_HOME`)
* @see {@link https://bud.js.org/docs/bud.proxy/}
*/
.proxy('http://melbi.local')
/**
* Development origin
* @see {@link https://bud.js.org/docs/bud.serve/}
*/
.serve('http://melbi.local')
/**
* URI of the `public` directory
* @see {@link https://bud.js.org/docs/bud.setPublicPath/}
*/
.setPublicPath('/wp-content/themes/sage/public/')
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json/}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
*/
.wpjson.settings({
color: {
palette: [
{
name: 'White',
slug: 'white',
color: '#FFFFFF'
},
{
name: 'Black',
slug: 'black',
color: '#161616'
},
{
name: 'Tan',
slug: 'tan',
color: '#E1E0D6'
},
{
name: 'Cream',
slug: 'cream',
color: '#F6F6F3',
},
{
name: 'Light Blue',
slug: 'light-blue',
color: '#899DA7'
},
{
name: 'Dark Blue',
slug: 'dark-blue',
color: '#334550'
},
],
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
// .useTailwindColors()
// .useTailwindFontFamily()
// .useTailwindFontSize()
.enable();
};