Fox1 Posted March 3, 2020 Share Posted March 3, 2020 Hello ... I desperately need help before going insane! Can anyone help me please? Pretty Please..... I am a newbie to GSAP and need help with WordPress integration. I have done the following.. Added a functions.php file within my child theme to enqueue the JS script (I used the CDN link). Created a 'custom-gsap-scripts.js' folder within my child theme What do I need to do next to get GSAP working on my Wordpress site? This is where I am lost... Any help would be great! Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 Hey Fox1 and welcome to the GreenSock forums! What error are you running into? It's pretty hard for us to help blindly Link to comment Share on other sites More sharing options...
Fox1 Posted March 3, 2020 Author Share Posted March 3, 2020 Many thanks for your quick reply Zach. I am running Wordpress and GSAP on my local machine (although I am also connected to the internet). Should I be downloading all the GSAP files, rather than trying to connect via the CDN? This is the error I am getting in the Chrome Dev tools: JQMIGRATE: Migrate is installed, version 1.4.1 gsap-scripts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map DevTools failed to parse SourceMap: http://writer.test/wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js.map I don't know if this is enough info? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 8 minutes ago, Fox1 said: gsap-scripts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) This is all the information that we need! It means that the path to the gsap-scripts.js file is incorrect. You need to correct path to the file. Based on the first post maybe it should be named custom-gsap-scripts.js instead of gsap-scripts.js? That's a complete guess since we can't see your files or the error for ourselves. Link to comment Share on other sites More sharing options...
GreenSock Posted March 3, 2020 Share Posted March 3, 2020 Also, those "DevTools failed to parse SourceMap: ..." messages aren't really errors - they just mean Chrome isn't able to find a SourceMap file but there's a known bug in Chrome that has been causing those issues for at least a few weeks. In other words, it may just be a browser issue and those files aren't even necessary - they're only for troubleshooting. They have absolutely nothing to do with GSAP. Link to comment Share on other sites More sharing options...
Fox1 Posted March 3, 2020 Author Share Posted March 3, 2020 Thanks for letting me know. I changed the file names but I still can't get the animation to work. I'm going to have another ago after a rest! Apart from the DevTools info.....what other info could I send you for assistance? I am working in a local environment. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 10 minutes ago, Fox1 said: Apart from the DevTools info.....what other info could I send you for assistance? I am working in a local environment. Using a search engine to learn about errors is a good way to learn. But there's no magical tool to fix errors for you Again, if you could show us a demo or link to the page at least we may be able to help? Especially if you include a screenshot of your project's directory and file structure. 1 Link to comment Share on other sites More sharing options...
Fox1 Posted March 4, 2020 Author Share Posted March 4, 2020 Hello Zach, Here are some screenshots of what I have cobbled together this is from the child theme where I tried to enqueue ....Maybe they will help point the way to how I too...can one day enter the heavenly realm of GSAP... (I tried to upload more but reached the max file size) Is there anything else..., files.... I can send you? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 4, 2020 Share Posted March 4, 2020 Based on that screenshot it looks like you have a /* as the first part of the gsap-scripts.js file name. If so, that's no good - definitely remove that. Also remove the .js from the custom-gsap-scripts directory name. Directories should not have file extensions. Besides that, it looks like your path is also incorrect. What I am guessing is incorrect: Probably want to use get_template_directory_uri(), not get_stylesheet_directory_uri(). But again, it depends on where the directory is found in your project. Probably need to change /js/ in the path to either /js/custom-gsap-scripts/ or just /custom-gsap-scripts/. It could be something else - you didn't provide the full directory structure so it's impossible for us to say. I recommend taking some time to study file structure and path formatting. It will save you (and us) headache in the end Additionally, there are several other threads related to loading GSAP in WP that might be able to help you. If you are still having trouble after learning more thoroughly about file structures and path formatting then I recommend taking a look at them. Here's a more recent one: Link to comment Share on other sites More sharing options...
Fox1 Posted March 4, 2020 Author Share Posted March 4, 2020 Thanks... I will look carefully at your instructions. I will look and study the paths and files. Also, I have read every single Wordpress related post on this forum already! And yes, I have a very bad headache! 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