横スクロール時の幅がなんらかの原因で取得できない

表題のとおりです。その「なんらか」がわかりません。

わからない理由は、見つけたスクリプトをそのまま使用し、応用するための修正ができないからに他ならず、お力をお貸しください。。

やりたいこと：
ヘッダーを過ぎ、scroll-sliderの位置から横スクロール。全ての要素が終わったらfooterに。

できてないこと：
ヘッダーを過ぎ、scroll-sliderの位置から横スクロール...まではできているのですが、scroll-slideの横幅の取得ができておらず
overflow：hiddenに関わらず、コンテンツの途中で横スクロールが終わってしまいます。

原因と思われる事：
拝借したスクリプトは、scroll-slideというコンテンツが横並びになっており、これらの横幅分、横スクロールできるのかと思うのですが、
こちらで作りたいものはscroll-slideというwrapは基本的に１個か２個で、１個は固定幅なのですが、もう一つは記事なので幅が不明確なのです。

使用した元コードはこちらです。

教えてほしいこと：
scroll-slideの横幅取得はどのようにすれば良いでしょうか？

<section class="scroll-slider">
<article class="scroll-wrapper">
<div class="entry-title-box scroll-slide">
<h1>記事タイトル</h1>
</div>
<div class="entry-content-box scroll-slide">
<p>記事テキストが入ります</p>
<p>記事テキストが入ります</p>
<p>記事テキストが入ります</p>
/// この調子で2000文字くらい
</div>
</article>
</section>

.scroll-slider {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  height: 100vh;
}
.scroll-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  padding:3em 0;
  box-sizing: border-box;
}
.entry-title-box{
  width:300px;
}
.entry-content-box{
  columns: 250px auto;
  column-gap: 3em;
  column-rule-style:solid;
  column-rule-width: 4.5px;
  column-rule-color: $c-line;
  column-fill: auto;
  text-align: justify;
  min-width:800px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<script>
!(function($) {

    'use strict';

    var $slider = $('.scroll-slider'),
        $slides = $('.scroll-slide'),
        $sliderWrapper = $('.scroll-wrapper'),
        $firstSlide = $slides.first();

    var settings = {},
        resizing = false,
        scrollController = null,
        scrollTween = null,
        scrollTimeline = null,
        progress = 0,
        scrollScene = null;

    function scrollSlider(options) {

        // Default
        settings = $.extend({
            slider: '.scroll-slider',
            sliderWrapper: '.scroll-wrapper',
            slides: '.scroll-slide',
            slideWidth: null,
            slideHeight: null,
        }, options);

        // Set dimensions
        setDimensions();

        // On resize
        $(window).on( 'resize', function() {
          clearTimeout(resizing);
          resizing = setTimeout(function() {
            setDimensions();
          }, 250);
        });

    }

    function setDimensions() {

        settings.slideWidth = $firstSlide.width();
        settings.slideHeight = $firstSlide.height();

        console.log(settings.slideWidth);
        console.log(settings.slideHeight);

        // Calculate slider width and height
        settings.sliderWidth = Math.ceil((settings.slideWidth * $slides.length));
        settings.sliderHeight = $firstSlide.outerHeight(true);

        // Set slider width and height
        $sliderWrapper.width(settings.sliderWidth);
        //$sliderWrapper.height(settings.sliderHeight);

        // Set scene
        setScene();

        //resizing = false;
    }

    function setScene() {

      var xDist = -$slides.width() * ( $slides.length - 1 ),
          tlParams = { x: xDist, ease: Power2.easeInOut };

      if (scrollScene != null && scrollTimeline != null) {

          progress = 0;
          scrollScene.progress(progress);

          scrollTimeline = new TimelineMax();
          scrollTimeline.to( $sliderWrapper, 2, tlParams );

          scrollScene.setTween(scrollTimeline);

          scrollScene.refresh();

      } else {
          // Init ScrollMagic controller
          scrollController = new ScrollMagic.Controller();

          //Create Tween
          scrollTimeline = new TimelineMax();
          scrollTimeline.to( $sliderWrapper, 2, tlParams );
          scrollTimeline.progress( progress );

          // Create scene to pin and link animation
          scrollScene = new ScrollMagic.Scene({
              triggerElement: settings.slider,
              triggerHook: "onLeave",
              duration: settings.sliderWidth
          })
          .setPin(settings.slider)
          .setTween(scrollTimeline)
          .addTo(scrollController)
          .on('start', function (event) {
            scrollTimeline.time(0);
          });
      }

    }

  $(document).ready(function() {
    scrollSlider();
  });

})(jQuery);
</script>