(Squarespace) Fade Portfolio items on scroll

[tuanphan]

To make Portfolio items fade in on Scroll, you can use this code to Code Injection > Footer.

You can also use this portfolio tool to add Portfolio, so you can add animation effect easier without using complex code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.grid-item').css({
        'opacity': '0',
        'transition': 'opacity 0.8s ease-out'
    });

    function checkViewport() {
        $('.grid-item').each(function(index) {
            var element = $(this);
            var elementTop = element.offset().top;
            var elementBottom = elementTop + element.outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            if (elementBottom > viewportTop && elementTop < viewportBottom) {
                if (!element.hasClass('animated')) {
                    setTimeout(function() {
                        element.css('opacity', '1').addClass('animated');
                    }, index * 150);
                }
            }
        });
    }

    checkViewport();

    $(window).scroll(function() {
        checkViewport();
    });

    $(window).resize(function() {
        checkViewport();
    });
});
</script>