I'm using scrollTrigger to scale the svg used in clip path but the page width is slightly greater than 100vw and height also seem to be a bit more as my center component also scroll a bit up at the end but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better
#EDIT: This was because the initial page (without ScrollTrigger) has no scroll so when ScrollTrigger adds scroll to the page. I.e. Say your page is 1830px initially but then ScrollTrigger puts a 17px scroll bar on the page now your viewport is 1813px but the content is already painted according to 1830px to compensate this 17px extra width the page shows a horizontal scrollbar it can be solved by using
body {overflow-y: scroll;}
Using this will initially put a scrollbar does solving the issue alltogether
What have i learned from this:
The main cluprit of this was the pin-spacer div creater by scroll trigger I dont know why but it was wider than the viewport width (1830px compared to 1813px in my case) and at the bottom of the scroll something triggred some a change in trigger element style from.
transform: translate3d(0px, 0px, 0px);
left: 0px;
top: 0.001px;
margin: 0px;
width: 1830px;
height: 890px;
padding: 0px;
box-sizing: border-box;
max-width: 1830px;
max-height: 890px;
position: fixed;
to
transform: translate3d(0px, 890.001px, 0px);
left: 0px;
top: 0px;
margin: 0px;
width: 1829.52px;
height: 889.524px;
padding: 0px;
bottom: auto;
right: auto;
this didnt make any sense for me
#Solution for this [Techincally just a workaround using css]
Enable markers in gsap (because everything is fine when markers are enabled)
then use this css rule to hide the markers
div[class^="gsap-marker-"] {
visibility: hidden;
opacity: 0;
}