PanosAx

I'm currently working on a header animation using GSAP's ScrollTrigger. While I've successfully set the initial offset top of elements below the header correctly, both before the animation starts and after it ends, I've encountered an issue during the animation itself. As I scroll through the animation, the offset top of these elements appears to fluctuate, resulting in an undesired effect. Additionally, it's important to note that I've pinned the entire page, which might be contributing to this offset inconsistency. My ultimate goal is to obtain the correct offset top values so that I can utilize the scrollTo plugin effectively. Furthermore, I've found that ScrollTo with anchor tags doesn't behave as expected in this scenario. Check the offset of h2 on the pen to understand my issue

https://codepen.io/panozX/pen/ZEqqWjj

Hello, So i have a div that when you scroll into it it gets pinned and then the scrolling animation starts the animation is tl.fromTo(".wrapper", {height: '554px', ease: "power4.inOut"}, { height: '277px', ease: "power4.inOut" }, "start") when the animation is done i have a huge gap from the pin-spacer. after days of searching and trying multiple things i couldn't achieve dynamic pin spacer height. ScrollTrigger.create({ pinnedContainer: "outer-div", trigger: ".wrapper", scrub: 1, anticipatePin: 1, pinType: "transform", pinSpacing: true, start: startPoint, markers: true, end: endPoint, animation: tl, toggleActions: "play none none reverse", }) this is my scrolltrigger. any help would be appreciated. Thanks in advance