shreeja Posted January 1, 2022 Share Posted January 1, 2022 Hello, I am absolutely new to gsap and WordPress. I am trying to build a practice WordPress site and I want to include gsap animations in it, but I really don't know how to do it. I have tried a few things like, I got the plugin WPcoder and inserted the scripts in the html, and the gsap code in the js sections of the plugin The insert headers and footers plugin: I added the below 2 lines of code in the Scripts in Header section of the plugin <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js" defer></script> and I even tried to enqueue the scripts in the funtions.php file in my theme(astra) folder. I added the below code in the end of the functions.php file function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), $in_footer = true ) wp_enqueue_script('gsap'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); and I get an error There has been a critical error on this website . By the way I have no knowledge of php. Nothing seems to work. Please help me with integrating gsap in WordPress. Thank you, Shreeja Link to comment Share on other sites More sharing options...
Cassie Posted January 1, 2022 Share Posted January 1, 2022 Hey there! I'm not too knowledgeable about wordpress but here's a video about enqueueing scripts. 1 Link to comment Share on other sites More sharing options...
Solution utopian Posted January 1, 2022 Solution Share Posted January 1, 2022 First off, if you are working on WordPress and editing themes. You should always create a child theme to make customizations on. It's bad practice to customize your parent theme (or just theme) because if the author of the theme updates their theme and you update it, you will lose all your customizations. If you make customizations on a child theme, you will then be able to safely update the parent theme without losing all your work. Now to help you enqueue. Your code should look like this: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), '1.0', true ); wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap-options.js', array('gsap'), '1.0', true ); wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both wp_enqueue_script('gsap-settings'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); This would then enqueue the script properly I believe (haven't tested it but pretty sure it should stop the error). I also added a gsap-settings script, which you can create that js file in your theme at the correct location and write all your animation in there and call gsap. Hopefully this helps! 5 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