JJEccles

Hi thank you for your prompt reply. No that's not my issue, to have the scroll position move slightly on resize would not be an issue for me at all, my issue is that when resizing occurs the container and panels completely disappear from the window. I apologize for the quality of the video but there was no other way i could get it below 1mb. after doing more digging around i found the resizing issue goes away if my scrollTrigger pinType is set to transform. However I need it to remain fixed as the container panels get this horrible jarring rubber band effect on scroll as they move horizontally across the screen when the pin is set to "transform". Is there a way i can keep my pinType as fixed but have it switch to transform during the resize event or any other workaround for this issue? I'm still plugging away trying to find a way to make it work but without any luck . But I think I need to find a way for the scrollTrigger to behave like it does when the pinType is in "transform" during resizing while being in "fixed" mode. Here is my container animation settings, (btw my main is the scroll-able element on my page): setupAnimations() { let sections = gsap.utils.toArray(".panel"); sections.forEach((section) => { section.style.height = `${window.innerHeight * 1.2}px`; }); this.scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { id: "hScroll", scroller: "main", trigger: ".container", pin: true, pinReparent: true, scrub: 1.5, anticipatePin: 1, end: "+=3000", }, }); And below is my setupScrollTrigger method: setupScrollTrigger() { let container = document.querySelector("main"); // Check if the container exists if (container) { ScrollTrigger.scrollerProxy(container, { scrollTop(value) { if (arguments.length) { container.scrollTop = value; // setter } else { return container.scrollTop; // getter } }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: "fixed", }); } } Desktop 2024.02.19 - 14.35.52.01.mp4

https://codepen.io/James-Eccles/pen/VwRRpyG

Hi all, I am having an issue where the scrollTrigger horizontal container animation works fine on all screen sizes, but if a resize occurs the panels will disappear from the window. Which on my page doesn't look so great as the viewer gets to see all the elements and backgrounds behind it. Ive seen this issue mentioned once or twice in other forums, but I have not seen anyone openly show a solution. I been banging away at it for the past few days with lots of different resize event linked function attempts without any luck. The demo is very minimal & in my site I am using a custom scroller on the main element of my page which I am not in this demo. Although in the demo I have managed to recreate the issue pretty much spot on to what I'm getting in my page. When resizing occurs before or after the container and has started its animation, no problems. but if you resize the window once the animation starts., panels disappear from view. If anyone with a better mind than mine (which I'm sure there are lots out there) could please take a look and advise on a solution I'd be really grateful. I very much like the horizontal container animation and think it has loads of potential for lots of developers out there. Its just this resizing issue that's stopping it from being a complete gamechanger. Thanks again and best regards James