Javascript scroll animation cuts off page

I am using a javascript smooth scrolling animation for my wordpress ecommerce website https://harperaustralia.com/ as demonstrated on https://tympanus.net/Tutorials/SmoothScrollAnimations/

However, the scroll discontinues before the bottom of the page and cuts off the last few lines of content and the footer. I need to zoom in and out before it can continue scrolling to the bottom of the page. This does not seem to be a problem in the demo.

The HTML is spread across header.php, page.php and footer.php files and includes a fixed container while the [data-scroll] div will get translated.

<main>
<div id="nav">navigation and logo here</div><!-- /END NAV -->
<div data-scroll>
<div id="header"></div><!-- /END HEADER -->
<div id="content">

<?php
    wp_reset_query(); // necessary to reset query
    while ( have_posts() ) : the_post();
        the_content();
    endwhile; // End of the loop.
?>

</div><!-- /END CONTENT -->
<div id="footer">footer content here</div><!-- /END FOOTER -->
</div><!-- /END DATA SCROLL -->
</main>

The relevant css is

[data-scroll] {
    will-change: transform;
}


element.style {

    transform: matrix(0, 0, 0, 1, 0, 600);
    transform-origin: 100% 50% 0px;
    opacity: 1
}

* {
    margin:0;
    padding:0;
    }

html {
scroll-behavior: smooth;
overscroll-behavior: none;
}

body {
    /* PADDING SAME AS FOOTER HEIGHT */
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing:antialiased;
    }


main {
animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

The javascript is linked in the footer.php file

<script src="https://harperaustralia.com/wp-content/plugins/smoothscroll/imagesloaded.pkgd.min.js"></script>
<script src="https://harperaustralia.com/wp-content/plugins/smoothscroll/smoothscroll.js"></script>

I have tried changing the height of the container and removing html {scroll-behavior: smooth; } to see if there were conflicts but these did not fix the problem. I would really appreciate any suggestions as to what I'm doing wrong!

Thanks