Tyco Interactive

Yes, this is precisely what I needed. Thank you very much. 😁

i have created a CodePen for my problem. my problem happening only in resolution between 1000 to 1920 when the zoom property is not equel to 1. https://codepen.io/Tyco-Interactive/pen/GReovOm

In our website we set zoom out on our body, calculated by js on every resize, so that we maintain the layout of our desktop (1920) on smaller resolutions (from 1200 up). We then calculate the actual vw/vh by multiplying the clientWidth and clientHeight with the zoom factor. The problem is that ScrollTrigger, of course, uses regular clientWidth/clientHeight and vw/vh and our method throws all of its calculations off. I think that the solution would be using Gsap's scrollerProxy, but I did not succeed in that. What I would like is to override ScrollTriggers clientWidth and clientHeight with my calculated values. Here is the actual code I use for setting the body zoom, so that my question is better understood: <style> :root { --desktop-breakpoint: 1919.98px; --zoom-breakpoint: 1200.02px; --browser-zoom: 1; --browser-height: 100vh; --browser-width: 100vw; } @media (min-width: 1200.02px) and (max-width: 1919.98px) { body { zoom: var(--browser-zoom); } } </style> <script> function setZoom() { const doc = document.documentElement; // set the zoom value for matching laptop view to desktop let desktopBreakpoint = parseInt( getComputedStyle( document.documentElement ).getPropertyValue( '--desktop-breakpoint' ) ) ?? 1920; let zoomBreakpoint = parseInt( getComputedStyle( document.documentElement ).getPropertyValue( '--zoom-breakpoint' ) ) ?? 1200.02; doc.style.setProperty( '--browser-zoom', `${parseFloat(window.innerWidth / desktopBreakpoint).toFixed(2)}` ); // set the css-variable value for --browser-height - take in account zoom out and add it to maintain actual 100vh // check if current window width is less than the zoom breakpoint, if so, set the zoom to 1 let zoom = desktopBreakpoint / window.innerWidth; if ( window.innerWidth < zoomBreakpoint || zoom < 1 ) { doc.style.setProperty( '--browser-height', `${window.innerHeight}px` ); doc.style.setProperty( '--browser-width', `${window.innerWidth}px` ); } else { doc.style.setProperty( '--browser-height', `${window.innerHeight * zoom}px` ); doc.style.setProperty( '--browser-width', `${window.innerWidth * zoom}px` ); } } setZoom(); </script>