Jump to content
Search Community

gsap 3 upgrade issues

ericshew test
Moderator Tag

Recommended Posts

Hi there,

 

Thanks again to the greensock team for an outstanding product. I'm upgrading to gsap 3 and am running into a few issues. On the previous version of GSAP, these issues did not happen.  I believe I added all of the plugins I was using before but I'm not sure about css rule plugin.  Please let me know your thoughts on resolving? Thank you. 

 

 

gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid cycle tween of
  1. {y: Array(2), x: Array(2), opacity: Array(2), ease: Array(2)}
Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid x tween of 500 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid x tween of -400 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid x tween of -400 Missing plugin? gsap.registerPlugin()

 

I'm also getting this error:

Uncaught TypeError: Cannot read property 'height' of undefined

 

Here are the plugins  I was using now.

wp_enqueue_script( 'GsapCore'  , get_stylesheet_directory_uri() . '/js/greensock/gsap.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'DrawSVG'    , get_stylesheet_directory_uri() . '/js/greensock/DrawSVGPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'Splittext'  , get_stylesheet_directory_uri() . '/js/greensock/SplitText.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'MorphSVG'   , get_stylesheet_directory_uri() . '/js/greensock/MorphSVGPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'CSSPlugin'  , get_stylesheet_directory_uri() . '/js/greensock/CSSRulePlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'TextPlugin' , get_stylesheet_directory_uri() . '/js/greensock/TextPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'customease' , get_stylesheet_directory_uri() . '/js/greensock/CustomEase.min.js', array ( 'jquery' ), null, true);

 

These were the plugins I was using prior to the upgrade.

    wp_enqueue_script( 'TweenMax'   , get_stylesheet_directory_uri() . '/js/greensock/TweenMax.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'DrawSVG'    , get_stylesheet_directory_uri() . '/js/greensock/plugins/DrawSVGPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'Splittext'  , get_stylesheet_directory_uri() . '/js/greensock/utils/SplitText.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'MorphSVG'   , get_stylesheet_directory_uri() . '/js/greensock/plugins/MorphSVGPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'CSSPlugin'  , get_stylesheet_directory_uri() . '/js/greensock/plugins/CSSPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'TextPlugin' , get_stylesheet_directory_uri() . '/js/greensock/plugins/TextPlugin.min.js', array ( 'jquery' ), null, true);
    wp_enqueue_script( 'customease' , get_stylesheet_directory_uri() . '/js/greensock/easing/CustomEase.min.js', array ( 'jquery' ), null, true);

 

Link to comment
Share on other sites

I'm getting errors throughout my entire site.  I'm not sure how I would replicate the issues in codepen.   Are there resources available that identify the issues (like cycle) or that provide insight into resolving them? Lastly, is GSAP 2 online documentation available? It would be really nice to have access to it since it may be some time before I can transition to 3. 

Link to comment
Share on other sites

As for the "Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()", that typically means that the target you passed in doesn't have that property (opacity in this case). So, for example, if you try animating opacity of a CSSRule that doesn't even exist, you'll get that error. So my best guess is that you've got a null target somewhere.

 

And yeah, the cycle stuff is actually more flexible and convenient now, using gsap.utils.wrap(). You're no longer limited to "stagger" methods, and you can use that utility for other stuff too. Let us know if you need help figuring out how to switch your cycle tween(s) to wrap(). 

  • Like 1
Link to comment
Share on other sites

30 minutes ago, ZachSaucier said:

It's linked to in the /3 welcome article and under the "Blog" section on the homepage.

 

Yes, that's what I mean by searching around. But I know that article exists.

 

Most of the stuff in the release notes would make a good migration guide. I can't imagine that most people are going to figure out how to convert stagger animations to v3 without a lot of digging around.

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