Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shailendra.khandewale

Wordpress Integration

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 

<script>

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

</script>

 

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

<?php
// 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:

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

 

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:

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

});
</script>

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Does whether the CDN is called from http or https?  The docs on your GitHub use HTTPS.

Link to comment
Share on other sites

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.
×