Using Scrollmagic for horizontal scroll to the right (not left) leaves big white space - horizontal-scrolling

Question

I'm using Scrollmagic to have horizontal scrolling. All works fine when things scroll to the left. When I have it scroll to the right, however, after the last image is a big white space.
I am using this in my header:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
This is my html, and all the images are the same width:
<!-- horizonal scroll left ------->
<div class="wraper">
<div class="container" id='container2'>
<img src="img/demobegins.jpg" />
<div class="caption more-space-right desktop">
caption 3
</div>
<img src="img/demo-mayfair-detre-1950.jpg" />
<div class="caption more-space-right desktop">
caption 2
</div>
<img src="img/demo-exposition-buildings-ca1949-upitt.jpg" />
<div class="caption more-space-right desktop">
caption 3
</div>
</div>
</div>
<!-- end horizonal scroll left------->
css:
.wraper{
overflow-x: hidden;
}
.container{
width: 4000px;
height: 100vh;
}
#container2 {
}
.container p{
position: absolute;
top: 50%;
left: 3%;
transform: translateY(-50%);
}
#container2 img, #container2 .caption {
float: right;
}
.container .caption {
width: 200px;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
}
.container img {
max-width: 80%;
}
jquery:
var HorzcontrollerLeft = new ScrollMagic.Controller();
var tl2 = new TimelineMax();
var elementWidth2 = document.getElementById('container2').offsetWidth;
var width2 = window.innerWidth - elementWidth2;
var duration2 = elementWidth / window.innerHeight * 100;
var official2 = duration2 + '%';
tl2
.to('#container2', 5, {x: -width, ease: Power0.easeNone});
var scene2 = new ScrollMagic.Scene({
triggerElement: '#container2',
triggerHook: 0,
duration: official2
})
.setPin('#container2')
.setTween(tl2)
.addTo(HorzcontrollerLeft);
}
Can anyone see what I'm doing wrong please?