<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="image-grid animation" viewBox="0 0 556.5 546">
<defs>
<clipPath id="image-clip1">
<rect x="243" y="96.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -50.7598 329.9303)" fill="#FFBB99" width="259.7" height="259.7" class="image-swipe-1" style="transform-origin: 0px 0px;"/>
</clipPath>
<clipPath id="image-clip2">
<rect x="342" y="369.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -191.5121 423.1241)" fill="#F9F9F9" width="146" height="146" class="image-swipe-2" style="transform-origin: 0px 0px;"/>
</clipPath>
<clipPath id="image-clip3">
<rect x="210.8" y="374.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -232.3811 329.4576)" fill="#FFBB99" width="141.4" height="141.4" class="image-swipe-3" style="transform-origin: 0px 0px;"/>
</clipPath>
<clipPath id="image-clip4">
<rect x="39.2" y="237" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -195.3262 191.916)" fill="#F9F9F9" width="189.5" height="189.5" class="image-swipe-4" style="transform-origin: 0px 0px;"/>
</clipPath>
<clipPath id="image-clip5">
<rect x="96.5" y="30.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.3546 150.0922)" fill="#F9F9F9" width="146" height="146" class="image-swipe-5" style="transform-origin: 0px 0px;"/>
</clipPath>
</defs>
<g class="fouc fouc--image" opacity="0" data-svg-origin="556.5 546" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px; opacity: 1;">
<rect x="243" y="96.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -50.7598 329.9303)" fill="#FFBB99" width="259.7" height="259.7" class="image-swipe-1"/>
<rect x="146" y="369.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -191.5121 423.1241)" fill="#F9F9F9" width="146" height="146" class="image-swipe-2"/>
<rect x="210.8" y="374.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -232.3811 329.4576)" fill="#FFBB99" width="141.4" height="141.4" class="image-swipe-3"/>
<rect x="39.2" y="237" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -195.3262 191.916)" fill="#F9F9F9" width="189.5" height="189.5" class="image-swipe-4"/>
<rect x="96.5" y="30.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.3546 150.0922)" fill="#F9F9F9" width="146" height="146" class="image-swipe-5"/>
</g>
<image clip-path="url(#image-clip1)" href="http://placekitten.com/700/400" preserveAspectRatio="xMidYMid slice" x="190" y="45" width="370" height="370" ></image>
<image clip-path="url(#image-clip2)" href="http://placekitten.com/200/300" preserveAspectRatio="xMidYMid slice" x="310" y="340" width="210" height="210"></image>
<image clip-path="url(#image-clip3)" href="http://placekitten.com/400/300" preserveAspectRatio="xMidYMid slice" x="180.8" y="344.5" width="200" height="200"></image>
<image clip-path="url(#image-clip4)" href="http://placekitten.com/300/300" preserveAspectRatio="xMidYMid slice" x="0" y="190" width="280" height="280"></image>
<image clip-path="url(#image-clip5)" href="http://placekitten.com/300/300" preserveAspectRatio="xMidYMid slice" x="60" y="0" width="215" height="215"></image>
</svg>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
svg {
max-width: 70vw;
max-height: 90vh;
}var grid = document.querySelector(".animation");
var enableAnimation = window.matchMedia("(prefers-reduced-motion: no-preference)")
.matches;
if (enableAnimation) {
var tl = gsap.timeline({
delay: 1.7,
defaults: {
transformOrigin: "right center",
ease: "expo.out",
duration: 1.2,
stagger: {
each: 0.5,
from: "end"
}
}
});
tl
.set(".fouc--image", {
opacity: 1
})
.from(".image-swipe-1", {
scaleX: 0
})
.from(
".image-swipe-2",
{
scaleX: 0
},
"<"
)
.from(
".image-swipe-3",
{
scaleX: 0
},
"<"
)
.from(
".image-swipe-4",
{
scaleX: 0
},
"<"
).from(
".image-swipe-5",
{
scaleX: 0
},
"<"
);
}
External CSS
This Pen doesn't use any external CSS resources.