GSAP and ScrollMagic: Padding top and pin spacer

Question

I am using GSAP v3 with ScrollMagic v2.0.7.

The problem I face is that after the animations are finished and I scroll up (reverse: false), it correctly registers that I don't want to execute the animations again on reverse, but it creates a padding-top equal to the duration of the scene:

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
  triggerElement: "#responsive-divider",
  duration: "100%",
  triggerHook: 0,
  reverse: false
})
  .setTween(action)
  .setPin("#responsive-divider")
  .addTo(controller);

In this case, the height of the element with the id of "responsive-divider" is 311px, so the class "scrollmagic-pin-spacer" gets a padding-top: 311px;

If I inspect element and remove padding-top then everything is OK.

Why is this happening? Is there a way to prevent this?

PS1: if I do not disable "reverse" then it works just fine. But in this case I don't want to get the reverse animation.

PS2: I found a way around this but I don't know if its a hack or the solution. On my timeline I used the "onComplete: removePadding", and I did the following:

function removePadding() {
  document.querySelector(".scrollmagic-pin-spacer").style.paddingTop = null;
}

Feels a little bit hacky to me.

Thanks in advance!

Answer 1

Adding triggerHook: 0 resolved the problem for me!