Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ericshew

gsap 3 upgrade issues

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

Hard to tell without examples.

 

There is no cycle. 

 

 

 

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

Hey @ericshew,

 

CodePen: Try a small part of your page.
And see if an error occurs.

 

If you mean with Docs of V2, use the button here

 

1251489523_Bildschirmfoto2019-11-20um16_56_01.png.38b645afb9640418ab3f951bd584a3a9.png

 

Best regards

Mikel

 

  • Like 3
Link to comment
Share on other sites

Read the post I linked to about using wrap instead of cycle. And read the release notes in that post.

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

2 hours ago, ericshew said:

Are there resources available that identify the issues (like cycle) or that provide insight into resolving them?

Our GSAP 3 release notes cover most all of the changes:

 

Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

Our GSAP 3 release notes cover most all of the changes:

 

Maybe call that a migration guide, and put it front and center on the homepage. I have to search around to even find those release notes. 

  • Like 1
Link to comment
Share on other sites

26 minutes ago, OSUblake said:

put it front and center on the homepage.

It's linked to in the /3 welcome article and under the "Blog" section on the homepage. It's not really a migration guide because it's not a process to convert from 2 to 3, it's just a list of changes and new things. 

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

Okay. Thanks for the information. I missed some of the resources you guys pointed out on my initial review.  I appreciate your help. 

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