Jump to content
Search Community

Greensock in wordpress

kathryn.crawford test
Moderator Tag

Go to solution Solved by Carl,

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

Hey guys,

 

I built a few webpages and was using tweenmax to animate some stuff. I recently bought a license so I could use morphsvg and I am loading those in to that local site and it's working great. Here's what I am loading. 

<!-- Modernizr (feature detection) -->
  <script src="js/modernizr.js"></script>


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <!--TweenMax-->
  <script src="js/tweenmax.js"></script>


  <!--MorphSVG plugin-->
  <script src="js/plugins/morphsvgplugin.js"></script>


  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


  <!-- My scripts -->
  <script src="js/scripts.js"></script>

Now we are moving the site to wordpress and so I am having to enqueue the files into wordpress. We were enqueue-ing greensock through the cdn originally and it worked great. Now that I have switched it to local js files it is broken, saying Tweenmax is undefined. I suspect something is wrong with what I am loading, or the order I am loading it in, but I can't seem to figure it out. Is there anything special I should do for wordpress? Here's my enqueue loading order.

  wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true );
	wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12');
	wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1');
	wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0');
	wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0');

	wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' );
  wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );

 

 

 

post-39440-0-91628100-1453494894_thumb.png

Link to comment
Share on other sites

I should add, this is what was working, however I am getting another error "Uncaught cannot tween a null target" for the function below, on the marked line. Like I said, worked fine before I moved to wordpress. Haven't changed any of the js. 



wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true );
wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'blueleaf-greensock-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js');

tl2.set('#overlay', {
    zIndex: 5
  })
  .set('#close', {
    zIndex: 6
  })
  .set('#overlay-text', {
    zIndex: 6
  })
  .to("#closed", 1, {
    morphSVG: {
      shape: "#open"
    }
  })
  .to(close, 0.6, { //Error here
    opacity: 1,
    ease: Expo.easeInOut
  }, 0)
Link to comment
Share on other sites

I would add your custom JS script with your GSAP tweens right after your TweenMax enqueued script.

 

Also i would set the wordpress enqueue() $in_footer to true so your scripts get loaded in the footer after all your DOM.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

I would second to post a link to your WordPress site like Carl suggested :)

  • Like 3
Link to comment
Share on other sites

@Jonathan, I moved the enqueue to the footer and it worked! Must have been something weird about how wordpress loads stuff. Looks like my scripts file was being loaded first, even though it was telling me it was last. As for posting the link to the site, unfortunately it's only local right now, so I can't share it with anyone.

Link to comment
Share on other sites

Is there anything wrong with the order I'm calling my gsap files in? If not I might just ask wordpress what's up. It may be an issue specific to them, like loading my scripts in the footer was. 

wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true );
wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12');
wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1');
wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0');
wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0');

wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' );
wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );
Link to comment
Share on other sites

  • Solution

Not sure this is related to your problem, but jquerys.gsap.js should only be loaded if you are writing your animations using jQuery.animate(). It seems you are using TimelineMax so I don't think it's needed. 

 

I see you are loading TimelineMax and easepack separately.

 

I would suggest you only load TweenMax.min.js + MorphSVGPlugin

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