Scale Element on Scroll

I want to create a stacking cards section where the cards shrink into the background while stacking on top of each other. I’ve achieved the stacking feature (even tho it’s clunky) but don’t know how to make them shrink the way i want to.


It’s hard to explain what exactly i mean. Here’s an example for exactly what i want to achieve. I am referring to the “workflow-scroll-wrap” section with the heading “My workflow to make the web flow”.

With the help of ChatGPT and a lot of back and fourth, i was able to achieve the exact effect i was looking for.
If anyone wants to replicate it, here you go.
Paste this script into the body of the page you want the effect to work on:

<script>
$(document).ready(function(){
    // Initial sizes of the divs
    var initialSizes = [1, 1, 1, 1]; // In ratio
    var minSizes = [0.85, 0.90, 0.95, 1]; // Minimum sizes in ratio
    var divs = ['#card-1', '#card-2', '#card-3', '#card-4'];
    var shrinkStarts = [];
    shrinkStarts.push($(divs[0]).offset().top);
    shrinkStarts.push($(divs[1]).offset().top);
    shrinkStarts.push($(divs[2]).offset().top);
    shrinkStarts.push($(divs[3]).offset().top);
    var shrinkEnds = shrinkStarts[shrinkStarts.length - 1] + 500; // Adjust this value to control the rate of shrinkage

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        for (let i = 0; i < divs.length; i++) {
            if (scroll >= shrinkStarts[i] && scroll <= shrinkEnds) {
                var totalScrollRange = shrinkEnds - shrinkStarts[i];
                var scrolledRange = scroll - shrinkStarts[i];
                var shrinkPercentage = scrolledRange / totalScrollRange;
                var newSize = initialSizes[i] - ((initialSizes[i] - minSizes[i]) * shrinkPercentage);

                $(divs[i]).css('transform', 'scale(' + newSize + ')');
            } else if (scroll > shrinkEnds) {
                $(divs[i]).css('transform', 'scale(' + minSizes[i] + ')');
            } else {
                $(divs[i]).css('transform', 'scale(' + initialSizes[i] + ')');
            }
        }
    });
});
</script>

This only works if you have 4 divs, if you have more/less, you have to modify the script (just the first part)
Make sure that you give each DIV a unique ID. In this case it’s “card-1”, “card-2”, “card-3” and “card-4”.

1 Like