Hello
I'm having a similar problem but here the inset values created by the pin-spacer are actually breaking the design, any clues on how to remove this inset?
Here is a demo of the site https://otra-9d8f98.webflow.io/info2-copy and the elements in question are the ones in magenta border
this is the JS code being used and in the bottom some images from the inspect
<script>
gsap.registerPlugin(ScrollTrigger)
var actionContact = gsap.to('#sticky-contact', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });
var actionServicios = gsap.to('#sticky-servicios', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });
ScrollTrigger.create({
trigger: ".banner-top",
start: "bottom top",
end: 'max',
markers:true,
pin: '#sticky-contact',
pinSpacing: false,
animation: actionContact,
toggleActions: 'play reverse play reverse'
});
ScrollTrigger.create({
trigger: ".banner-top",
start: "bottom top",
endTrigger: ".section-15",
end: 'top bottom',
markers:true,
pin: '#sticky-servicios',
pinSpacing: false,
animation: actionServicios,
toggleActions: 'play reverse play reverse'
});
</script>
