RyanReese

I'm coming back here to say that basically your first codepen was enough for me to work it in and adjust how I was doing things. Thank you for your help!

I have further reduced my codepen and I do not believe it's CSS causing the issue, but something with GSAP. I'll try implementing your function you've posted.

I believe we posted at the same time (I edited my above post for the codepen). Thank you! I'm working on reducing the code in there (I pasted my whole main.css file, for example).

Here's a visual of what's happening with the current code I've implemented: https://fnlst.com/v/mHzbkA Codepen - https://codepen.io/ryanreese09/pen/eYxLrXr?editors=1010

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".

All done! https://codepen.io/ryanreese09/pen/gOvaZOz

scrollTrigger: { trigger: this.querySelector(".image-hero"), scrub: true, start: "top bottom", end: "top top", onUpdate(e) { // console.log(e); // console.log(e.animation.ratio); // console.log(e.animation.vars.yPercent); // console.log(e.progress * 100 + "%"); // console.log(HOME.getTransform($(".seek .image-hero > header")[0]).yValue); // console.log("--"); } }, I think adding these "start/end" made it start/stop at the proper times. Now I just need this somehow converted to a negatiev top margin. I'll begin my onUpdate work to convert it but wondering if you experts know of a better way. Finally, onComplete, I'll add that "zoom" class.

Here's the codepen. https://codepen.io/ryanreese09/pen/bGLVmMg You can now see why I cannot use transform.

$(".seek").each(function() { const _ = $(this); const fullHeight = _.find(".image-hero").height(); const textHeight = _.find(".image-hero > header").height(); gsap.to(this.querySelector(".image-hero > header"), { yPercent: (Math.round((fullHeight - textHeight) / 2)) / textHeight * -100, ease: "none", scrollTrigger: { trigger: this.querySelector(".image-hero"), scrub: true, onUpdate(e) { // console.log(e); // console.log(e.animation.ratio); // console.log(e.animation.vars.yPercent); // console.log(e.progress * 100 + "%"); // console.log(HOME.getTransform($(".seek .image-hero > header")[0]).yValue); // console.log("--"); } }, }); }); So to explain this code, .seek is just a parent div. Nothing special going on there. .image-hero is a child div of .seek with 100vh. The > header is at the bottom of this element, and it needs to parallax scroll up when you get to the .seek container, and stop at the center of the page. This math I have going on is a fancy way of telling GSAP to yPercent the >header enough to where it's at the bottom of the page at the end of the animation. The problem is (I think) that GSAP gets to the final percent after the panel is fully off the screen. I'd like the (in this case) -199% yPercent value to be completed when the TOP of .seek is at teh top of the window. So the animation will START when .seek top of the element hits the bottom of the viewport. Not done yet, but for other design reasons, I cannot use transform for the yPercent. I will be converting that in the onUpdate() to a negative top margin. Is there a native way to convert yPercent to use a top margin? And I guess while I'm here, is there a way to more easily tell GSAP to stop >header at the middle of the screen instead of my convoluted math? I looked through the docs but nothing stood out.