Реализация реверсивного скролла блоков с помощью TweenMax и ScrollMagic

Question

Нужно реализовать анимацию прокрутки блоков в реверсном направлении (пример). Страница скролится, как обычно, но когда скролл доходит до этого блока (скрин 1), то прокрутка страницы останавливается и скроллится сам блок. Левая часть блока скролиится вниз, правая - вверх. Спасибо заранее)

Answer 1

Например так:

const controller = new ScrollMagic.Controller();

const animation = new TimelineMax();

animation
  .to('.cards-wrapper', {yPercent: -50}, '')
    .to('.cards-left', 1, {y: '+=65vh'}, '')
    .to('.cards-right', 1, {y: '-=65vh'}, '')
    .to('.cards-left', 1, {y: '+=65vh', delay: 1}, '')
    .to('.cards-right', 1, {y: '-=65vh', delay: 1}, '')
  .to('.cards-wrapper', {yPercent: -100}, '+=1')

const scene = new ScrollMagic.Scene({
    triggerElement: '.cards',
    triggerHook: 'onCenter',
    duration: '300%'
})
.setPin('.cards-wrapper')
.setTween(animation)
.addIndicators()
.addTo(controller)

selector {
  display: block;
  width: 100%;
  height: 100vh;
  background: #ccc;
}

.cards {
  display: block;
  width: 100%;
  height: 300vh;
  margin: 5vh 0;
  position: relative;
}

.cards-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 65vh;
  overflow: hidden;
}

.cards-left,
.cards-right {
  display: block;
  width: calc(50% - 1px);
}

.cards-left {
  transform: translateY(calc(-100% + 65vh));
}

.cards__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65vh;
  background-color: var(--bg);
  color: #fff;
  font-size: 5vw;
}

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>

<selector>TEST SELECTOR</selector>

<div class="cards">
  <div class="cards-wrapper">
    <div class="cards-left">
      <div class="cards__item" style="--bg: #bcae98">Card 3</div>
      <div class="cards__item" style="--bg: #a3bbb7">Card 2</div>
      <div class="cards__item" style="--bg: #003e33">Card 1</div>
    </div>
    <div class="cards-right">
      <div class="cards__item" style="--bg: #01362d">Card 1</div>
      <div class="cards__item" style="--bg: #a3bbb7">Card 2</div>
      <div class="cards__item" style="--bg: #e5dbc9">Card 3</div>
    </div>
  </div>
</div>

<selector>TEST SELECTOR</selector>

БЛОГ НА HUSL

Реализация реверсивного скролла блоков с помощью TweenMax и ScrollMagic

Ответы (1 шт):