My website incorporates Scrollmagic to dynamically load sections (changing opacity and adding movement) as users scroll through it. Everything functions perfectly fine when I preview the HTML file on my computer, but once I uploaded it to my hosting server and viewed the live site, the functionality ceased to work. You can access the site at . There are multiple sections that utilize this loading technique, with the code snippet below serving as an example:
<!--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>