SVG Image Sequence Masks
A Pen by Tom Miller on CodePen.
<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> |
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'}}) | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script> |
/* .maskImg{ | |
image-rendering: pixelated; | |
image-rendering: -moz-crisp-edges; | |
image-rendering: crisp-edges; | |
} */ |
A Pen by Tom Miller on CodePen.