[ScrollTrigger adding inset to element]

Okay, sorry for not being clear, I'll try to be concise

I couldn't replicate the problem in codepen (it works as expected)

See the Pen zYaVQKJ by ATOMICHAVEZ (@ATOMICHAVEZ) on CodePen

The problem in the live site is that the two elements that have the "pin" applied get wrapped in a pin-spacer with top inset of 120px and 240px respectively. I don't understand where these insets come from, as you can see in the image below the elements get shifted downwards because of this and is not the expected behavior

 

 

 

[ScrollTrigger adding inset to element]

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>