<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-1_component").forEach((component) => {
		if (component.hasAttribute("data-scroll-1")) return;
		component.setAttribute("data-scroll-1", "");

		const triggers = component.querySelectorAll(".scroll-1_trigger_item");
		const targets = component.querySelectorAll(".scroll-1_target_item");
    
		function makeActive(index) {
			triggers.forEach((el, i) => el.classList.toggle("is-active", i === index));
			targets.forEach((el, i) => el.classList.toggle("is-active", i === index));
		};
		makeActive(0);
    
		triggers.forEach((el, i) => {
			ScrollTrigger.create({
				trigger: el,
				start: "top center",
				end: "bottom center",
				onToggle: ({isActive}) => isActive && makeActive(i)
			});
		});
	});
});
</script>