A unique effect on my webpage involves an SVG comprised of scattered squares that enlarge when the user scrolls past a specific point. However, there is a problem with the scaling process which results in a horizontal scroll bar appearing. This occurs because the entire SVG block scales up, rather than each individual square.
Is there a way to target each individual rect element to enlarge smoothly with an easing motion, giving the illusion of growth without stretching the page layout? Additionally, once the user continues to scroll, can the squares revert back to their original size?
Explore the updated version of the webpage on JSFiddle
HTML:
<div class="move-wrapper">
<svg class="enlarge" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="82 -117 1363 770" style="enable-background:new 82 -117 1363 770;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#A7A9AC;stroke-width:5;stroke-miterlimit:10;}
</style>
<rect x="153" y="-34" class="st0" width="22.1" height="22.1"/>
<rect x="335.5" y="55.5" class="st0" width="22.1" height="22.1"/>
<rect x="529.5" y="343.1" class="st0" width="22.1" height="22.1"/>
<rect x="153.6" y="464.4" class="st0" width="22.1" height="22.1"/>
<rect x="976.5" y="166.4" class="st0" width="22.1" height="22.1"/>
<rect x="1288.3" y="-12.1" class="st0" width="22.1" height="22.1"/>
<rect x="941.9" y="575.3" class="st0" width="22.1" height="22.1"/>
<rect x="1355.9" y="434.9" class="st0" width="22.1" height="22.1"/>
</svg>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
CSS:
.move-wrapper {
width:100%;
position:absolute;
}
.spacer {
height:500px;
}
JS:
$(function() {
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 20) {
$(".enlarge").css({"-moz-transform": "scale(1.5,1.5)", "webkit-transform": "scale(1.5,1.5)"});
$(this).off('scroll');
}
if (scrollPosition >= 40) {
$(".enlarge").css({"-moz-transform": "scale(1,1)", "webkit-transform": "scale(1,1)"});
$(this).off('scroll');
}
});
});