.l-wrapper {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.l-section {
  height: 600px;
  background: #ccc;
  margin-bottom: 30px;
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 1.5s, transform 1.5s;
  &.is-animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.c-text {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
}

class ScrollAddClass {
  constructor() {
    this.controller = new ScrollMagic.Controller();
    this.settings = {
      target: ".js-scrollAnimation",
      addClassName: "is-animated",
      triggerHook: "onEnter",
      offset: 0
    }
  }

  init(options) {
    this.setup(options);
    this.attachEvent(this.controller);
  }

  setup(options) {
    this.settings = Object.assign({
      target: this.settings.target,
      addClassName: this.settings.addClassName,
      triggerHook: this.settings.triggerHook,
      offset: this.settings.offset
    }, options || {});
  }

  attachEvent(controller) {
    let targets = document.querySelectorAll(this.settings.target);
    if (targets.length == 0) {
      return;
    }
    for (let target of targets) {

      let scene = new ScrollMagic.Scene({
        triggerElement: target,
        triggerHook: this.settings.triggerHook,
        offset: this.settings.offset
      })
        // .addIndicators()
        .addTo(controller);

      scene.on('enter', () => {
        target.classList.add(this.settings.addClassName);
      });

    }
  }

}

let hoge = new ScrollAddClass();
hoge.init({
  offset: 50
});