SVG Image Sequence Masks

index.html

<div class="main">
  <svg viewBox="0 0 630 352" xmlns="http://www.w3.org/2000/svg">
    <mask id="m1">
        <image class="m" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
    </mask>
    <mask id="m2">
        <image class="m" class="maskImg" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
    </mask>
    <image mask="url(#m2)" xlink:href="https://images.unsplash.com/photo-1597626564517-426e3c39ebbe?auto=format&fit=crop&w=1260&q=50" width="630" height="420" />
    <g mask="url(#m1)">
      <image class="frog" xlink:href="https://images.unsplash.com/photo-1597626564517-426e3c39ebbe?auto=format&fit=crop&w=1260&q=50" width="630" height="420" />
    </g>
  </svg>
</div>

script.js

gsap.timeline({ repeat:-1, repeatDelay:0, yoyo:true})
    .to('.m', {duration:(i)=>[0.8,1.3][i], y:-10266, ease:'steps(29)', stagger:-0.3}, 0)
    .to('.frog', {duration:2, scale:1.1, transformOrigin:'50% 50%', ease:'power2', onComplete:swapMask}, 0)

let currentMask = 1;
function swapMask(){
  if (currentMask==3) currentMask = 1;
  else currentMask++;
  gsap.set('.m', {attr:{'xlink:href':'https://assets.codepen.io/721952/liquidMask'+currentMask+'.svg'}})
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>

style.css

/* .maskImg{
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
} */

svg-image-sequence-masks.markdown

SVG Image Sequence Masks

A Pen by Tom Miller on CodePen.

License.