How to get consistent duration when using ScrollMagic `.on('progress')` callback?

Question

I am using this library https://github.com/janpaepke/ScrollMagic . I create a ScrollMagic based animation of 4 elements fade in and out according to the Scene e.progress value. For example when e.progress > 0.3 && e.progress < 0.5 it makes this.cIndex = 1; which trigger first element fade out and the second one fade in.

I implement this by using progress callback of scrollMagic as code below. Basically, this code works well, but there is one problem: this.cIndex may turns from 1 to 3 very quickly when user scroll too fast, as a result the animation duration of 4 elements is not consistent.

 new ScrollMagic.Scene({
    triggerElement: pinEl2,
    triggerHook: 'onLeave',
    duration: 1000,
  })
    .setPin(pinEl2)
    .on('progress', (e) => {
      const base = 0.3;
      const unit = (1 - base) / 4;
      if (e.progress <= base) {
        this.cIndex = 0;
      } else if (e.progress > base && e.progress <= base + unit) {
        this.cIndex = 1;
      } else if (e.progress > base + unit && e.progress <= base + unit * 2) {
        this.cIndex = 2;
      } else if (e.progress > base + unit * 2) {
        this.cIndex = 3;
      }
    })
    .addTo(this.controller);