SVG Video Mask Animation - ScrollMagic & Greensock

index.html

<span id="trigger"></span>
<div class="container">
	<!-- SVG	 -->
	<div class="svg-container">
  	<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
    	<defs>
				<!-- Mask -->
      	<mask id="mask" x="0" y="0" width="1920" height="1080" >
        	<rect x="0" y="0" width="1920" height="1080"/>
        	<text x="960" y="1em">X</text>
      	</mask>
    	</defs>
    	<rect x="0" y="0" width="1920" height="1080"/>
  	</svg>
  </div>
	
	<!-- Video	
  Video from http://www.wedistill.io/
  -->
  
  <div class="video-container">
    <video id="video" autoplay playsinline muted="muted" preload="auto" loop="loop" poster="https://assets.codepen.io/687837/poster.png"> 
      <source src="https://hellosusan.io/assets/video.mp4" type="video/mp4">
    </video>
  </div>
  
</div>

<section class="nextSection">
	<p>HELLO</p>
</section>

script.js

// Greensock
var tl = new TimelineMax();

tl.add(
	TweenMax.to('.video-container', 1, {scale: 0.5, transformOrigin: "50%, 50%", ease:Power2.easeInOut})
)

tl.add(
	TweenMax.to(".svg-container", 1, {scale: 10, transformOrigin: "50%, 50%", ease:Power2.easeInOut}),
	"-=1"
)

// ScrollMagic
var controller = new ScrollMagic.Controller();

// container pin
var startpin = new ScrollMagic.Scene({
	duration: 800
})
.setPin(".container")
.addTo(controller);

// tween
new ScrollMagic.Scene({
	duration: 500
})
.setTween(tl)
.addTo(controller);

$('video').get(0).play();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

html{
	height: 1674px;
	font-weight:100;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 50em;
/*   letter-spacing:-0.03em; */
}

p {
	font-size: 64px;
	color: white;
	letter-spacing: 10px;
}

.nextSection {
	height: 800px;
	background: lightslategrey;
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
  height: 100vh;
  width: 100%;
  position: relative;
	overflow: hidden;
}

.video-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.svg-container {
  width: 100%;
  height: 100%;
	position: absolute;
	top: 0;
}

svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
}
svg text {
    text-anchor: middle;
}
svg mask rect {
/*   fill: rgba(255, 255, 255, 0.8); */
  fill: white;
}
svg > rect {
    fill: white;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

.video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
/* 	border: 10px solid black; */
  overflow: hidden;
}

video{
  min-height: 100%;
  min-width: 100%;
  height: 150%;
  width: 150%;
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translate( -50%, -50%);
}

svg-video-mask-animation-scrollmagic-greensock.markdown

SVG Video Mask Animation - ScrollMagic & Greensock

Attempt on recreating the effects of iPhone X website: https://www.apple.com/ca/iphone-x/

svg video mask inspiration from https://codepen.io/SahAssar

A Pen by Susan Lee on CodePen.

License.