スライドごとの水平ScrollMagicコンテナ内の視差コンテンツが途切れます

内側のラッパーのX値を更新することで、水平方向に移動する固定スライダーがあります。この部分はうまく機能します。

ただし、個々のスライドごとに、テキストに視差効果を持たせたいと思います（現在のスライドと比較して、スクロールすると遅くなります）。

これが私が設定した小さな（簡略化された）テストケースです： https://codepen.io/michaelpumo/pen/EJgWgd

残念ながら、何らかの理由で、テキストがずれているように見え、アニメーションがスムーズではありません。これは、ScrollMagicのAPIを誤解している可能性があります（これは私にとっては新しいことです）。

「視差」部分を取得する唯一の方法は、2番目のコントローラーをvertical: falseに設定することだったため、2つのコントローラーがあります。おそらくそれはこれと関係がありますか？

ヘルプは大歓迎です！

JavaScript

const ease = window.Power4.easeInOut
const el = document.querySelector('#el')
const wrapper = document.querySelector('#wrapper')
const slides = el.querySelectorAll('.El__slide')
const amount = slides.length
const controller = new window.ScrollMagic.Controller()
const horizontalMovement = new window.TimelineMax()

const controller2 = new window.ScrollMagic.Controller({
  vertical: false
})

horizontalMovement
  .add([
    window.TweenMax.to(wrapper, 1, {
      x: `-${(100 / amount) * (amount - 1)}%`
    })
  ])

new window.ScrollMagic.Scene({
    triggerElement: el,
    triggerHook: 'onLeave',
    duration: `${amount * 100}%`
  })
  .setPin(el)
  .setTween(horizontalMovement)
  .addTo(controller)

slides.forEach((item, index) => {
  const title = item.querySelector('h1')
  const subtitle = item.querySelector('h2')
  const tween = new window.TimelineMax()

  tween
    .fromTo(title, 1, { x: 0 }, { x: 500 }, 0)
    .fromTo(subtitle, 1, { x: 600 }, { x: 500 }, 0)

  new window.ScrollMagic.Scene({
      triggerElement: item,
      triggerHook: 1,
      duration: '100%'
    })
    .setTween(tween)
    .addTo(controller2)
})

[〜＃〜] scss [〜＃〜]

.El {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  &__wrapper {
    display: flex;
    width: 400vw;
    height: 100vh;
  }
  &__slide {
    display: flex;
    align-items: center;
    width: 100vw;
    padding: 50px;
    &:nth-child(1) {
      background-color: salmon;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: orange;
    }
    &:nth-child(4) {
      background-color: tomato;
    }
  }
  &__content {
    width: 100%;
  }
  &__title,
  &__subtitle {
    position: relative;
  }
}

[〜＃〜] html [〜＃〜]

<div id="el" class="El">
  <div id="wrapper" class="El__wrapper">
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title A</h1>
        <h2 class="El__subtitle">Subtitle A</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title B</h1>
        <h2 class="El__subtitle">Subtitle B</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title C</h1>
        <h2 class="El__subtitle">Subtitle C</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title D</h1>
        <h2 class="El__subtitle">Subtitle D</h2>
      </div>
    </div>
  </div>
</div>

javascriptcssscrollmagic

2019/04/07Michael Giovanni Pumo

あなたの質問の本質を理解したかどうかはわかりません。私の母国語が違うからです。しかし、私はあなたを助けたいです。スムーズなテキストの動きのために、これはあなたを助けます：

.El__title, .El__subtitle {
    position: relative;
    transition-property: all;
    transition-duration: 900ms;
    transition-timing-function: ease;
    transition-delay: 0s;
}

私があなたを誤解した場合は、最終的に必要なものの例を見せてください。それから私は助けようとします。

2019/04/18Vladimir Rodichev