Skip to content

Instantly share code, notes, and snippets.

Created Oct 15, 2020
What would you like to do?
SVG Image Sequence Masks
<div class="main">
<svg viewBox="0 0 630 352" xmlns="">
<mask id="m1">
<image class="m" xlink:href="" y="-1" width="630" height="10620" />
<mask id="m2">
<image class="m" class="maskImg" xlink:href="" y="-1" width="630" height="10620" />
<image mask="url(#m2)" xlink:href="" width="630" height="420" />
<g mask="url(#m1)">
<image class="frog" xlink:href="" width="630" height="420" />
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':''+currentMask+'.svg'}})
<script src=""></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