So my issue is when screen size is changing the pin-spacer div that GSAP puts on pinned divs is not updating creating major issues. I am new to GSAP and I don't understand it enough to trouble shoot it yet. Any suggestions?
useEffect(() => {
let SJP3START = "top 50%";
let SJP3END = "+=1000";
if(screenSize <1920 && screenSize >= 1400){
SJP3END = "+=730"
SJP2START = "top 45%"
}
if(screenSize < 1400 && screenSize >= 1024){
SJP3START = "top 45%";
SJP3END = "+=532"
}
let SJ2P3 = gsap.timeline({
scrollTrigger: {
trigger: ".trigger-p-3",
start: SJP3START,
end: SJP3END,
scrub: true,
pin: ".trigger-p-3 ",
pinSpacing: false,
onEnter: ()=>{
resetYTranslation(".trigger-p-3")
} ,
onEnterBack: () => {
resetYTranslation(".trigger-p-3")
},
onLeave: () => {
BucketHover?.classList.add("bg-white");
BucketHover?.classList.remove("bg-[#F4B97B]");
TeamHover?.classList.remove("bg-white");
TeamHover?.classList.add("bg-[#398090]");
setIsHoveredConsultancy(false);
setConsultancyCondition(true);
setIsHoveredDedicated(true);
setDedicatedCondition(false);
},
},
});
SJ2P3.set(".trigger-p-3", { x:-2000, ease: Linear.easeNone });
SJ2P3.to(".trigger-p-3", { x: 0, ease: Linear.easeNone } );
SJ2P3.to(".trigger-p-3", { x: 2000, ease: Linear.easeNone },"+=1");
return () => {
SJ2P3.kill()
};
}, []);
/// HTML
<div className="w-full relative trigger-p-3 mt-[213px] xl:mt-[292px] 2xl:mt-[400px] mb-[130px] xl:mb-[177px] 2xl:mb-[242px]" id="section-3">
<div className="fade-left-p-3">
<h1 className="text-[22px] xl:text-[28px] 2xl:text-[42px] 2xl:leading-[55px] font-bold w-[360px] xl:w-[500px] 2xl:w-[684px] ">
{" "}
Get specialist advice or a helping
hand in high intensity times
</h1>
<p className="text-xs xl:text-[16px] leading-normal 2xl:text-[22px] font-thin w-[360px] mt-[28px] xl:w-[500px] 2xl:w-[675px] ">
Whether you're navigating complex cloud environments or
streamlining your development operations, our consultants are here
to offer the expertise and helping hand needed to propel your
startup towards success. Our consultancy service offers a unique
suite of solutions specifically designed to complement tech teams in
startups. Recognizing the dynamic and often high-intensity nature of
the startup environment, we provide targeted support through our
specialized consultancy buckets.
</p>
</div>
<div className="w-1/2 absolute right-0 top-0">
<div className="relative w-full ">
<img
src={handshake}
alt="Computer"
className="absolute top-0 left-0 fade-right-p-3 w-[137px] h-[80px] xl:w-[187.61px] 2xl:w-[257px] xl:h-[108.04px] 2xl:h-[148px]"
></img>
<img
src={piechart}
alt="Phone"
className="absolute top-[83px] xl:top-[113.15px] 2xl:top-[155px] left-0 fade-right-1-p-3 w-[137px] h-[137px] xl:w-[187.61px] 2xl:w-[257px] xl:h-[187.61px] 2xl:h-[257px]"
></img>
<img
src={meeting}
alt="Phone"
className="absolute top-0 left-[141px] xl:left-[192.72px] 2xl:left-[264px] fade-right-2-p-3 w-[220px] h-[220px] xl:w-[300.76px] 2xl:w-[412px] xl:h-[300.76px] 2xl:h-[412px]"
></img>
</div>
</div>
