Jump to content
Search Community

how to add gsap animations to WordPress

shreeja test
Moderator Tag

Go to solution Solved by utopian,

Recommended Posts

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

  • Solution

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!

  • Like 5
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...