GSAP и ScrollMagi c: верхняя накладка и проставка для штифта - PullRequest
Новая
       81

GSAP и ScrollMagi c: верхняя накладка и проставка для штифта

0 голосов
/ 07 апреля 2020

Я использую GSAP v3 с ScrollMagi c v2.0.7.

Проблема, с которой я сталкиваюсь, заключается в том, что после завершения анимации и прокрутки вверх (реверс: ложь) она правильно регистрирует, что я не хочу снова выполнять анимацию в обратном порядке, но она создает отступ, равный продолжительности сцены: 

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);

В этом случае высота элемента с идентификатором «отзывчивый» -divider "равен 311px, поэтому класс" scrollmagi c -pin-spacer "получает верхний отступ: 311px;

enter image description here

Если я осмотрите элемент и удалите верхний слой, тогда все в порядке.

Почему это происходит? Есть ли способ предотвратить это?

PS1: если я не отключаю «реверс», то он работает просто отлично. Но в этом случае я не хочу получать обратную анимацию.

PS2: я нашел способ обойти это, но я не знаю, является ли это взломом или решением. На своей временной шкале я использовал «onComplete: removePadding» и сделал следующее: 

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

Заполняет меня немного хаком.

Заранее спасибо!

...