<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(ScrollTrigger);

	document.querySelectorAll(".scroll-5_component").forEach((component) => {
		if (component.hasAttribute("data-scroll-5")) return;
		component.setAttribute("data-scroll-5", "");

		const container = component.querySelector(".scroll-5_container");
		const track = component.querySelector(".scroll-5_track");
		if (!container || !track) return;

		const update = () => component.style.setProperty("--track-size", `${track.offsetWidth - container.offsetWidth}px`);
		update();
		let width = window.innerWidth;
		window.addEventListener("resize", () => window.innerWidth !== width && (width = window.innerWidth, update()));

		let tl = gsap.timeline({
			scrollTrigger: {
				trigger: component,
				start: "top top",
				end: "bottom bottom",
				scrub: true,
			},
		});
		tl.fromTo(component, { "--progress": 0 }, { "--progress": 1, ease: "none" });
	});
});
</script>