ToniGSAP Posted October 26, 2020 Share Posted October 26, 2020 Hi, I'm new on GSAP and I have been reading about integrating it on Wordpress. I already integrated other libraries in the past like waypoints.js I've followed the rules of the existing topics about it, but I still get an error: Uncaught ReferenceError: gsap is not defined at custom-gsap-scripts.js?ver=5.5.1:11 on this example from Codepen: const anim = gsap.to(".box", { rotation: 27, x: 100, duration: 1, ease: "power3", repeat: -1, repeatDelay: 1 }); These are the steps I followed: 1. Enqueue via CDN in functions.php in the child theme (using get_stylesheet_directory_uri()) 2. Create the directory in the child theme with the file custom-gsap-scripts.js 3. I added my custom GSAP code waiting the DOM is ready. Did I missed something? Could anyone help me? Thanks very much in advance. Greetings. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 Hey Toni and welcome to the GreenSock forums. Those steps sound like the correct ones. Could you share with us a URL that shows the load error? Perhaps we can use the dev tools to figure out what's going wrong. Perhaps your load order is incorrect or something like that. Link to comment Share on other sites More sharing options...
ToniGSAP Posted October 26, 2020 Author Share Posted October 26, 2020 Hi @ZachSaucier, thanks for your welcome message and your fast reply. Sure, I've been testing it on my test domain: http://beta.tonigalbis.es/testing-4/ You'll be able to see that error in the console. Thanks again. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 I see in the network panel of the dev tools that you're loading an old version of GSAP (twice it looks like): http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js?ver=5.5.1 You should load the most recent version once instead https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js Link to comment Share on other sites More sharing options...
ToniGSAP Posted October 27, 2020 Author Share Posted October 27, 2020 Okay Zach, thanks again for your help! I'm very excited with GSAP potential! I am trying to read all the documentation about its integration with wordpress and possibilities. Actually, I am trying to replicate this codepen on this page: http://beta.tonigalbis.es/new-gsap/ See the Pen mdVMOjr#code-area by celli (@celli) on CodePen But animations don't work as expected. I'm specially interested in the text animation. I tried to import Scrolltrigger plugin but the error is: Uncaught SyntaxError: Cannot use import statement outside a module Now, I am importing it via: wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); I also tried to paste in the header of my site: <script type="module">...</script> but maybe I'm not doing in the correct way. Could you please help me with this? Thank you! Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 27, 2020 Share Posted October 27, 2020 1 hour ago, ToniGSAP said: wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); Here you're attempting to load ScrollMagic, a non-GreenSock library, instead of ScrollTrigger. You should be loading ScrollTrigger instead: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js You shouldn't be using modules in this situation. Make sure you use the minified non-modules versions of your JS libraries including GSAP. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 27, 2020 Share Posted October 27, 2020 1 hour ago, ToniGSAP said: I'm specially interested in the text animation. That demo also makes use of SplitText, one of the many super helpful Club GreenSock plugins. So you'll need a Shockingly Green membership to use it in your site. Keep in mind that with a membership you can use GSAP including the Club plugins on an unlimited number of projects. We’re pretty confident you’ll find that a membership pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. Link to comment Share on other sites More sharing options...
ToniGSAP Posted October 27, 2020 Author Share Posted October 27, 2020 Ok, thanks for the comment @ZachSaucier. Regardless of SplitText, I am still not able to see any scroll effect in my site. I think I should keep learning and reading more about GSAP and its integration in WP, and probably in a couple of months I think of getting member of Club GreenSock. Thanks. All the best. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now