Scrollmagic stops working when website is uploaded to server?

I’ve created a website that uses Scrollmagic to load in portions of the site (ie, change their opacity and make them move up) as the user scrolls through it. It works fine on the HTML file on my computer, but for some reason once I uploaded it to my hosting server and went on the live site, it stopped working. The url is https://liudzi.com/. There are multiple sections that load like this, but I’ve included a portion of the code as an example below:

<!--SCROLLMAGIC-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script>
    var controller = new ScrollMagic.Controller();

    var fadein_tween = TweenMax.fromTo('#content0', 1, {
        yPercent: 10,
        opacity: 0,
        ease: Power1.easeInOut
    }, {
        yPercent: 0,
        opacity: 1,
        ease: Power1.easeInOut
    });
</script>

Answer

The browser blocks insecure requests on secure pages. Change the source to https://.

This is pointed out in the dev console:

Advertisement

Answer