Jump to content
Search Community

Wordpress Integration

shailendra.khandewale test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys ,


This is my first time using Tween. I need help with integration of Tween inside my WordPress Theme. I have already necessary js files using  wp_enqueue_script inside function.php.

But I am confused how and where to use and wrrite scrips such as 


TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), or any tweens.



Link to comment
Share on other sites

Hello shailendra.khandewale and Welcome to the GreenSock Forum!


If you are developing a WordPress theme or customizing a WordPress theme, you can add your JS file within your WordPress functions.php file. Add this to your functions.php file

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
    wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/wp-content/js/custom-gsap-scripts.js', array(), false, true );
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

The last parameter shows true which means WordPress will add the JS file to the footer instead of in the head,


Here is the link for more information on enqueuing JS files in WordPress:




You can see that right after TweenMax.min.js, that I am adding my custom-gsap-scripts.js script so this way it is added right after TweenMax.


Your custom code should look like this:

// wait until DOM is ready before running using jQuery ready() method
     // run your custom code
     TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), or any tweens.


Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hello Deven


You can use both.. or even none like this:


Using secure https:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Using unsecure http:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Using agnostic //, protocol wont matter it can work on both https or http:

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Any one of the three above ways will work. It just depends what protocol is being used on your webpage or website.



  • Like 1
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...