SOURCE

gsap.timeline()
    .set('.main', {position:'fixed', background:'#b9bdbe', width:'100%', maxWidth:'630px', top:'50%', left:'50%', x:'-50%', y:'-50%'})
    .from('.txt', {duration:3, letterSpacing:-10, scale:0.8, rotation:0.1, transformOrigin:'50% 50%'}, 0.2)
    .to('.bg',  {duration:3, attr:{y:-30}, ease:'power1.inOut'}, 0.2)
    .to('.seq2', {duration:1, attr:{y:-10974}, ease:'steps(32)'}, 0.2)
    .to('.seq1', {duration:2, attr:{y:-10974}, ease:'steps(32)'}, 0.4)

<div class="main">
  <svg viewBox="0 0 630 354" xmlns="http://www.w3.org/2000/svg">
    <mask id="m1">
      <image class="seq1" xlink:href="https://assets.codepen.io/721952/spritesheet.jpg" width="630" height="11328" y="354"/>
    </mask>
    
    <mask id="m2">
      <image class="seq2" xlink:href="https://assets.codepen.io/721952/spritesheet.jpg" width="630" height="11328" y="354"/>
    </mask>
    
    <image mask="url(#m2)" class="bg" xlink:href="https://assets.codepen.io/721952/smokeyTrees.jpg" width="630" height="450" y="0"/>
    
    <g mask="url(#m1)">          
      <text class="txt" x="10" y="220" fill="rgba(220,220,210,0.8)">TEXT MASK</text>
    </g>
    
  </svg>
</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body, html {
  width:100%;
  height:100%;
  background:#b9bdbe;
  font-family: 'Montserrat', sans-serif;
  font-size:97px;
  text-align:center;
}

div {
  position:absolute;
}