Believe me, I have scoured this forum for the answer, and have found numerous similar forum posts, but none of them have solved my issue. I have a set of <button>'s which work as a nav to scroll you to the pinned section in a vertically pinned GSAP container. The scrolling behavior is buggy. I believe it's due to the transform position screwing up GSAP. If I click a nav item one time, I will get the wrong position (the position depends on where I am, because I believe the transform value is a culprit here). If I keep clicking repeatedly, it gets closer and closer to the correct position, until it ultimately ends up in the right position. I've tried doing some math to provide an exact pixel number for GSAP to scrollto, but I have yet to succeed. I even tried implementing the getScrollLookup function in this thread
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
let tlPosts = document.querySelector(".homepage-explore .tex-wrapper"),
fullCont = document.querySelector(".homepage-explore"),
imageSections = gsap.utils.toArray(".homepage-explore .image-slide"),
sections = gsap.utils.toArray(".homepage-explore .explore-item-container"),
getMaxHeight = () => sections.reduce((val, section) => val + section.offsetHeight, 0),
maxHeight = getMaxHeight(),
tl = gsap.timeline();
let st = ScrollTrigger.create({
animation: tl,
trigger: ".homepage-explore",
pin: true,
start: 'top top',
scrub: 1,
end: () => `+=${document.querySelector('.tex-wrapper').offsetHeight - window.innerHeight}`,
invalidateOnRefresh: false
});
tl.to(sections, {
y: () => window.innerHeight - (maxHeight + 650),
duration: 1,
ease: "none"
});
const sectionIndex = parseInt(this.getAttribute("data-section-index"));
const scrollToSectionButtons = document.querySelectorAll(".homepage-explore .explore-button-nav");
let links = gsap.utils.toArray(".homepage-explore .explore-button-nav"),
linkTargets = links.map(link => $(".explore-item-container").eq(link.getAttribute("data-section-index"))[0]);
// const targetSection = sections[sectionIndex];
links.forEach((link, i) => {
let target = linkTargets[i];
console.log(target);
link.addEventListener("click", e => {
ScrollTrigger.refresh();
console.log(getScrollLookup(target, "top top"));
let getScroll = getScrollLookup(target, "top 125px");
e.preventDefault();
gsap.to(window, {
duration: 1,
scrollTo: getScroll(target),
overwrite: "auto"
});
})
});
Basically what you see here is that "explore-button-nav" is the class of each <button> which should be what I'm clicking to scroll us to the specific pinned section. What am I doing wrong here? I can create a minified example if needed. ".tex-wrapper" is the direct parent of the 4 pinned sections that I'm trying to scroll to (there are 4 ".explore-button-nav"'s which correlate to the 4 pinned sections directly inside of ".tex-wrapper".