Высота контейнера прокрутки установлена ​​ниже высоты окна

Question

Я пытаюсь анимировать, используя спрайты и ScrollMagi c, используя этот фантастический пример c Дениса Гебеля. Мой вопрос: как мне сделать сцену (где анимация происходит при прокрутке) определенной высоты, а не 100% экрана? Если я установлю сцену на высоту: 50%; например, я получаю это большое белое пространство под сценой. Любая помощь будет высоко ценится.

// @explanation
// define the pin once in the target scene, but
// don't attach animation within same scene; instead
// create a scene for every class and toggle them on or off
// depending on the offset value of the scroll.

// @info
// To see this pen with indicators make sure to uncomment the 
// lines containing .addIndicators()
//
// While this is a scroll example I've also included a CSS only
// version to understand how steps can work in CSS animations.

// global vars
var viewer       = document.querySelector('.viewer'),
    frame_count  = 9,
    offset_value = 100;

// init controller
var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 0,
    reverse: true
  }
});

// build pinned scene
new ScrollMagic.Scene({
  triggerElement: '#sticky',
  duration: (frame_count * offset_value) + 'px',
  reverse: true
})
.setPin('#sticky')
//.addIndicators()
.addTo(controller);

// build step frame scene
for (var i = 1, l = frame_count; i <= l; i++) {
  new ScrollMagic.Scene({
      triggerElement: '#sticky',
      offset: i * offset_value
    })
    .setClassToggle(viewer, 'frame' + i)
    //.addIndicators()
    .addTo(controller);
}

html,
body {
  height: 100%;
}

body {
  width: 100%;
}

.header {
  color: white;
  font-size: 50px;
}

.section {
  height: 50%;
  background: #293744;
  color: #899eb5;
}

.scene {
  height: 50%;
  width: 100%;
  background: #EAEAEA;
}

.center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
}

.viewer {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
  width: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/doodle-sprite.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
}

.viewer.frame1 {
  background-position: -200px 50%;
}

.viewer.frame2 {
  background-position: -400px 50%;
}

.viewer.frame3 {
  background-position: -600px 50%;
}

.viewer.frame4 {
  background-position: -800px 50%;
}

.viewer.frame5 {
  background-position: -1000px 50%;
}

.viewer.frame6 {
  background-position: -1200px 50%;
}

.viewer.frame7 {
  background-position: -1400px 50%;
}

.viewer.frame8 {
  background-position: -1600px 50%;
}

.viewer.frame9 {
  background-position: -1800px 50%;
}

@-webkit-keyframes drink-coffee {
  to {
    background-position: -1800px 50%;
  }
}

@keyframes drink-coffee {
  to {
    background-position: -1800px 50%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<header class="header section">
  <div class="center">&darr;</div>
</header>

<section class="scene section" id="sticky">
  <div class="viewer"></div>
</section>

<section class="section">
  <div class="center">End</div>
</section>

Answer 1

Создайте элемент, который будет действовать как ваша обертка, дайте ему CSS:

.wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

Затем поместите туда свой свиток.

Пожалуйста, дайте мне знать, если это не так не работает.