title: Recreating a parallax zoom effect with SVG Image mask
body: <p>I'm trying to recreate the effect found <a href="https://www.reformcollective.com/" rel="nofollow noreferrer">at the bottom of this page</a> where the words "REFORM CO" Zoom in to reveal a background image with a headline.</p>
  
  <p>I attempted to recreate this effect myself using skrollr but I've hit a wall. ideally I'd like the SVG to be smaller and centered in the mask and for the video to stay fixed until the mask disappears just like the REFORM CO example.</p>
  
  <p>Here's my HTML and the link to my attempt: <a href="https://jsfiddle.net/uex526qs/1/" rel="nofollow noreferrer">https://jsfiddle.net/uex526qs/1/</a></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="knockout"&gt;
  
    &lt;svg x="50%" y="100%" class="knockout-text-container"  height="100%" data-0="opacity:1;transform: scale(1);" data-50p="opacity:0;font-size: 10em;transform: scale(10);"&gt;
  
      &lt;rect class="knockout-text-bg" width="100%" height="100%" fill="#fff" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)"/&gt;
  
      &lt;mask id="knockout-text"&gt;
        &lt;rect width="100%" height="100%" fill="#fff" x="0" y="0"  /&gt;
  
        &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.73 97.73"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:#000;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;shape2&lt;/title&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Content"&gt;&lt;path class="cls-1" d="M48.86,97.73A7.72,7.72,0,0,1,41.15,90V7.72a7.72,7.72,0,1,1,15.43,0V90A7.72,7.72,0,0,1,48.86,97.73Z"/&gt;&lt;path class="cls-1" d="M90,56.58H7.72a7.72,7.72,0,1,1,0-15.43H90a7.72,7.72,0,1,1,0,15.43Z"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
  
  
      &lt;/mask&gt;
  
    &lt;/svg&gt;
  
  &lt;/div&gt;
  
  
  &lt;video autoplay muted loop id="myVideo"&gt;
  &lt;source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Any help is appreciated</p>