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

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

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

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

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

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

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

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

HTML
1<section class="scroll-slider">
2<article class="scroll-wrapper">
3<div class="entry-title-box scroll-slide">
4<h1>記事タイトル</h1>
5</div>
6<div class="entry-content-box scroll-slide">
7<p>記事テキストが入ります</p>
8<p>記事テキストが入ります</p>
9<p>記事テキストが入ります</p>
10/// この調子で2000文字くらい
11</div>
12</article>
13</section>

css
1.scroll-slider {
2  position: relative;
3  overflow: hidden;
4  display: block;
5  margin: 0;
6  padding: 0;
7  height: 100vh;
8}
9.scroll-wrapper {
10  position: relative;
11  display: flex;
12  flex-wrap: nowrap;
13  height: 100%;
14  padding:3em 0;
15  box-sizing: border-box;
16}
17.entry-title-box{
18  width:300px;
19}
20.entry-content-box{
21  columns: 250px auto;
22  column-gap: 3em;
23  column-rule-style:solid;
24  column-rule-width: 4.5px;
25  column-rule-color: $c-line;
26  column-fill: auto;
27  text-align: justify;
28  min-width:800px;
29    }

js
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
3<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
5<script>
6!(function($) {
7
8    'use strict';
9
10    var $slider = $('.scroll-slider'),
11        $slides = $('.scroll-slide'),
12        $sliderWrapper = $('.scroll-wrapper'),
13        $firstSlide = $slides.first();
14
15    var settings = {},
16        resizing = false,
17        scrollController = null,
18        scrollTween = null,
19        scrollTimeline = null,
20        progress = 0,
21        scrollScene = null;
22
23    function scrollSlider(options) {
24
25        // Default
26        settings = $.extend({
27            slider: '.scroll-slider',
28            sliderWrapper: '.scroll-wrapper',
29            slides: '.scroll-slide',
30            slideWidth: null,
31            slideHeight: null,
32        }, options);
33
34        // Set dimensions
35        setDimensions();
36
37        // On resize
38        $(window).on( 'resize', function() {
39          clearTimeout(resizing);
40          resizing = setTimeout(function() {
41            setDimensions();
42          }, 250);
43        });
44
45    }
46
47    function setDimensions() {
48
49        settings.slideWidth = $firstSlide.width();
50        settings.slideHeight = $firstSlide.height();
51
52        console.log(settings.slideWidth);
53        console.log(settings.slideHeight);
54
55        // Calculate slider width and height
56        settings.sliderWidth = Math.ceil((settings.slideWidth * $slides.length));
57        settings.sliderHeight = $firstSlide.outerHeight(true);
58
59        // Set slider width and height
60        $sliderWrapper.width(settings.sliderWidth);
61        //$sliderWrapper.height(settings.sliderHeight);
62
63        // Set scene
64        setScene();
65
66        //resizing = false;
67    }
68
69    function setScene() {
70
71      var xDist = -$slides.width() * ( $slides.length - 1 ),
72          tlParams = { x: xDist, ease: Power2.easeInOut };
73
74      if (scrollScene != null && scrollTimeline != null) {
75
76          progress = 0;
77          scrollScene.progress(progress);
78
79          scrollTimeline = new TimelineMax();
80          scrollTimeline.to( $sliderWrapper, 2, tlParams );
81
82          scrollScene.setTween(scrollTimeline);
83
84          scrollScene.refresh();
85
86      } else {
87          // Init ScrollMagic controller
88          scrollController = new ScrollMagic.Controller();
89
90          //Create Tween
91          scrollTimeline = new TimelineMax();
92          scrollTimeline.to( $sliderWrapper, 2, tlParams );
93          scrollTimeline.progress( progress );
94
95          // Create scene to pin and link animation
96          scrollScene = new ScrollMagic.Scene({
97              triggerElement: settings.slider,
98              triggerHook: "onLeave",
99              duration: settings.sliderWidth
100          })
101          .setPin(settings.slider)
102          .setTween(scrollTimeline)
103          .addTo(scrollController)
104          .on('start', function (event) {
105            scrollTimeline.time(0);
106          });
107      }
108
109    }
110
111  $(document).ready(function() {
112    scrollSlider();
113  });
114
115})(jQuery);
116</script>