tweenmax、scrollmagicを使うと謎の余白が生まれるのでそれを消したい。

実現したいこと

https://codepen.io/susan8098/pen/Bwjdvr
こちらのデモを参考に作成しているのですが、containerの前にセクションを作ると謎の余白が生まれ表示が大きく崩れます。余白をなくすやり方を教えて頂きたいです。
また正常に表示された場合、containerのエリアを固定させた状態で、アニメーションを行い、終わったら次のセクションに行くようにしたいです。
どうか皆様のお力を貸していただけませんか。よろしくお願いいたします。

ソースコード

html
1<section class="backSection">
2	<p>HELLO</p>
3</section>
4<span id="trigger"></span>
5<div class="container">
6	<!-- SVG	 -->
7	<div class="svg-container">
8  	<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
9    	<defs>
10				<!-- Mask -->
11      	<mask id="mask" x="0" y="0" width="1920" height="1080" >
12        	<rect x="0" y="0" width="1920" height="1080"/>
13        	<text x="960" y="1em">X</text>
14      	</mask>
15    	</defs>
16    	<rect x="0" y="0" width="1920" height="1080"/>
17  	</svg>
18  </div>
19	
20	<!-- Video	
21  Video from http://www.wedistill.io/
22  -->
23  
24  <div class="video-container">
25    <video id="video" autoplay playsinline muted="muted" preload="auto" loop="loop" poster="https://assets.codepen.io/687837/poster.png"> 
26      <source src="https://hellosusan.io/assets/video.mp4" type="video/mp4">
27    </video>
28  </div>
29  
30</div>
31
32<section class="nextSection">
33	<p>HELLO</p>
34</section>
35

css
1html{
2	height: 1674px;
3	font-weight:100;
4}
5
6body {
7  font-family: 'Montserrat', sans-serif;
8  font-weight: 900;
9  font-size: 50em;
10/*   letter-spacing:-0.03em; */
11}
12
13p {
14	font-size: 64px;
15	color: white;
16	letter-spacing: 10px;
17}
18
19.nextSection {
20	height: 800px;
21	background: lightslategrey;
22	position: relative;
23	z-index: 5;
24	display: flex;
25	align-items: center;
26	justify-content: center;
27}
28.backSection {
29     height: 100vh;
30     background: lightslategrey;
31     display: flex;
32     align-items: center;
33     justify-content: center;
34}
35
36.container {
37  height: 100vh;
38  width: 100%;
39  position: relative;
40	overflow: hidden;
41}
42
43.video-container {
44  position: absolute;
45  width: 100%;
46  height: 100%;
47}
48
49.svg-container {
50  width: 100%;
51  height: 100%;
52	position: absolute;
53	top: 0;
54}
55
56svg {
57	width: 100%;
58	height: 100%;
59	overflow: visible;
60	display: block;
61}
62svg text {
63    text-anchor: middle;
64}
65svg mask rect {
66/*   fill: rgba(255, 255, 255, 0.8); */
67  fill: white;
68}
69svg > rect {
70    fill: white;
71    -webkit-mask: url(#mask);
72    mask: url(#mask);
73}
74
75.video-container {
76  position: absolute;
77  top: 50%;
78  left: 50%;
79  transform: translate(-50%, -50%);
80  z-index: -1;
81/* 	border: 10px solid black; */
82  overflow: hidden;
83}
84
85video{
86  min-height: 100%;
87  min-width: 100%;
88  height: 150%;
89  width: 150%;
90	position: absolute;
91	left: 50%;
92	top: 60%;
93	transform: translate( -50%, -50%);
94}

javascript
1// Greensock
2var tl = new TimelineMax();
3
4tl.add(
5	TweenMax.to('.video-container', 1, {scale: 0.5, transformOrigin: "50%, 50%", ease:Power2.easeInOut})
6)
7
8tl.add(
9	TweenMax.to(".svg-container", 1, {scale: 10, transformOrigin: "50%, 50%", ease:Power2.easeInOut}),
10	"-=1"
11)
12
13// ScrollMagic
14var controller = new ScrollMagic.Controller();
15
16// container pin
17var startpin = new ScrollMagic.Scene({
18	duration: 800
19})
20.setPin(".container")
21.addTo(controller);
22
23// tween
24new ScrollMagic.Scene({
25	duration: 500
26})
27.setTween(tl)
28.addTo(controller);
29
30$('video').get(0).play();