Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

Greensock in wordpress

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 moved my scripts.js file into the footer, and now everything works, with the cdn link, but it does not do anything if I use my local gsap files. No error's just no tweening. 

Link to comment
Share on other sites

Sorry to hear of all the problems. It's very difficult to troubleshoot this stuff blind.

 

I can't think of a good reason why the GSAP files you are hosting wouldn't work. Can you post a link to your WP site?

  • Like 2
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

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

Yay Carl! That solved the issue of it not working with my local gsap files. 

  • Like 1
Link to comment
Share on other sites

Cool. Glad it helped.

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