Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Oct 15, 2020
Embed
What would you like to do?
SVG Image Sequence Masks
<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;
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment