<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>
// DEMO GLOBALS
// ==========================================================

html,
body {
  height:100%;
}

body {
  width:100%;
}


// UTILITIES
// ==========================================================

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

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

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

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


// REQUIRED STYLES
// ==========================================================

$frame-count: 9;
$offset-val: 100;

.viewer {
  // CSS ONLY EXAMPLE
  // animation: drink-coffee 1s steps($frame-count) infinite;
  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%;
}

@for $i from 1 through $frame-count {
  .viewer.frame#{$i} {
    background-position: -(($i * $offset-val) * 2) + px 50%;
  }
}

// CSS ONLY EXAMPLE
@keyframes drink-coffee {
  to {
    background-position: -1800px 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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js