JQuery not running on my codepen

I have some Jquery code that’s not working and I’m not sure why, To be clear, it’s not running at all. This is a mobile site so you may want to keep you screen width to about 500-700px. There are some images and text boxes that are supposed to slide into the center as you scroll down the page.

Here’s the link https://codepen.io/tyl-er/pen/mwXZOG

$(document).ready(function() {
    $(window).scroll(function() {
        var t1 = $(".why").offset().top,
            h1 = $(".why").outerHeight(),
            t2 = $(".portfolio").offset().top,
            h2 = $(".portfolio").outerHeight(),
            t3 = $(".strategy").offset().top,
            h3 = $(".strategy").outerHeight(),
            t4 = $(".ready").offset().top,
            h4 = $(".ready").outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
        if (wS > t1 + h1 - wH) {
            $(".img1").animate({ left: "60vw" }, 1000);
            $(".text1").animate({ right: "70vw" }, 1300);
        }
        if (wS > t2 + h2 - wH) {
            $(".img2").animate({ left: "60vw" }, 1000);
            $(".text2").animate({ right: "70vw" }, 1300);
        }
        if (wS > t3 + h3 - wH) {
            $(".img3").animate({ left: "60vw" }, 750);
            $(".text3").animate({ right: "70vw" }, 1000);
        }
        if (wS > t4 + h4 - wH) {
            $(".img4").animate({ left: "60vw" }, 750);
            $(".text4").animate({ right: "70vw" }, 1000);
        }
    });
    /*
    $(".why").hover(function(){
        $(".img1").animate({left: '50vw'},1250);
        $(".text1").animate({right: '60vw'},1000);
    });
    */
});

Can you be more specific about what section isn’t running? It all seems to run for me - except that I couldn’t test the “.why” section because I can’t find it on the page.

Also, some of your images are called with http - but on codepen they should be https. Check your browser console.