SaidNS

Ooh, I fixed it! The issue was that the scripts are before the elements so it doesn't see them. Thanks so much man, really appreciate it! (For anyone seeing this in the future, put your scripts at the bottom of the file to prevent this).

oops that's an issue I made while transcribing from my IDE to here. Normally, there is no hashtag or anything and I changed it but still no avail.

Hi all. Recently, I had some trouble getting GSAP to work with CDN. I fixed it by now but I'm having issues with ScrollTrigger plugin. As you can see, I have the scripts all before the script tag for the gsap. And then if you scroll down you can find the anim class on a div. The #topcontent and #middlecontent are from something above this which uses vanilla GSAP and they work really great. But, I can't get the .anim animation to work <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.from('#middlecontent', { opacity: 0, y: 100, duration: 1 } ); gsap.from('#topcontent', { opacity: 0, y: -100, duration: 1 } ); gsap.from('#anim', { scrollTrigger: '#anim', opacity: 0, y: -100, duration: 1 }); </script> <h3 class="center" style="margin-top: 64px; margin-bottom: 48px; font-weight: 800;">Features</h3> <div class="row" style="margin-top: 64px; display: flex;"> <div class="left_home col s12" style="display:flex; align-content:space-around; flex-wrap:wrap;"> <div id="anim" class="col s12" style="display:flex; align-items:center;"> <i class="material-icons" style="font-size: 50px; margin: auto 0; color:#7390FF;">settings</i> <h6 style="font-weight: 100; margin: auto 0 auto 25px;">Body Text</h6> </div> Did I install the function wrong? Keep in mind this is in a .handlebars(basically .html) file and it's a large modular project. We also used Materialize for this project, thus the col and s12 classes.