gsap 3 upgrade issues

[ericshew]

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);

 

[OSUblake]

Hard to tell without examples.

 

There is no cycle. 

 

 

 

[ericshew]

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. 

[mikel]

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

 

 

Best regards

Mikel

 

[OSUblake]

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

[GreenSock]

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(). 

[ZachSaucier]

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:

 

[OSUblake]

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. 

[ZachSaucier]

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. 

[OSUblake]

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.

[ericshew]

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