1

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;

enter image description here

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!

christostsang
  • 1,701
  • 3
  • 27
  • 46
  • This is a ScrollMagic issue - I'd post in its GitHub repo but its not really maintained so I wouldn't have my hopes up. I'd use alternative methods to fire animations on scroll. GreenSock is in the process of making its own scroll library. Side note: you can use .set() to set styles which is more convenient: `gsap.set(".scrollmagic-pin-spacer", {paddingTop: ""});` – Zach Saucier Apr 08 '20 at 13:54
  • @ZachSaucier thanks for the input! Actually I stepped away from setPin() and I went for a plain-old animation when we scroll at the scene. Just like you said, contacting Greensock about this they mention that they will soon have their ScrollMagic alternative to solve all problems. Fingers crossed! :) – christostsang Apr 08 '20 at 14:05

1 Answers1

0

Adding triggerHook: 0 resolved the problem for me!

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
olga29
  • 1
  • 2