Pariola-droid

import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, CustomEase, ScrollToPlugin); let indexToActivate = 0; useEffect(() => { const startScrollSection = document.querySelector(".start-features-section"); const scrollIndicator = scrollSectionIndicator.current; const featuredNodes = Array.from(document.querySelectorAll(".featured")); const featuredIndicators = Array.from(document.querySelectorAll(".features_section_indicator")); // const totalScrollableHeight = 3000; const sectionHeight = totalScrollableHeight / featuredNodes.length; console.log("sectionHeight", sectionHeight); gsap.set(scrollIndicator, { autoAlpha: 0, y: 100, }); ScrollTrigger.create({ trigger: startScrollSection, start: "top top", end: `+=${totalScrollableHeight}px`, scrub: true, pin: true, onUpdate: self => { console.log("self", self); console.log("prev", self.previous()); // const scrollPosition = self.scroll() - self.start; const scrollPosition = totalScrollableHeight * self.progress; console.log("scrollPosition", scrollPosition); if (scrollPosition > 0 && scrollPosition < totalScrollableHeight) { gsap.to(scrollIndicator, { autoAlpha: 1, y: 0, transition: "ease-in-out-cubic", }); } else { gsap.to(scrollIndicator, { autoAlpha: 0, y: 100, transition: "ease-in-out-cubic", }); } indexToActivate = Math.floor(scrollPosition / sectionHeight); indexToActivate = Math.min(Math.max(indexToActivate, 0), featuredNodes.length - 1); console.log("indexToActivate", indexToActivate); // activateCurrentSection(indexToActivate); }, }); function activateNode(indexToActivate, nodeArray, className = "active") { if (indexToActivate >= 0 && indexToActivate < nodeArray.length) { nodeArray.forEach(_node => { _node.classList.remove(className); }); nodeArray[indexToActivate].classList.add(className); } else { console.error("Index out of bounds:", indexToActivate); } } // button indicators function updateActiveFeatureIndicator() { activateNode(indexToActivate, featuredIndicators); } // scroll function updateActiveFeatureSection() { activateNode(indexToActivate, featuredNodes); } // parent function function activateCurrentSection(indexToActivate) { updateActiveFeatureSection(indexToActivate); updateActiveFeatureIndicator(); } function scrollToCurrentSection(index) { indexToActivate = index; // activateCurrentSection(indexToActivate); gsap.to(startScrollSection, { duration: 1, scrollTo: { y: indexToActivate * sectionHeight, autoKill: false, }, ease: "ease-in-out-cubic", }); } // button click featuredIndicators.forEach((numberNode, index) => { numberNode.addEventListener("click", () => { scrollToCurrentSection(index); }); }); }, []); Hello there, need help with a scrollTo issue, please I'm trying to use a scrollTo plugin to scroll to a particular height in my pinned section (startScrollSection) when I click on my (featureIndicator) button and I also expect the scroll to continue from where I clicked correctly instead of starting from scrollPosition: 0