ericshew Posted November 20, 2019 Share Posted November 20, 2019 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 {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 More sharing options...
OSUblake Posted November 20, 2019 Share Posted November 20, 2019 Hard to tell without examples. There is no cycle. 2 Link to comment Share on other sites More sharing options...
ericshew Posted November 20, 2019 Author Share Posted November 20, 2019 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 More sharing options...
mikel Posted November 20, 2019 Share Posted November 20, 2019 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted November 20, 2019 Share Posted November 20, 2019 Read the post I linked to about using wrap instead of cycle. And read the release notes in that post. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2019 Share Posted November 20, 2019 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(). 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 20, 2019 Share Posted November 20, 2019 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 More sharing options...
OSUblake Posted November 20, 2019 Share Posted November 20, 2019 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 20, 2019 Share Posted November 20, 2019 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 More sharing options...
OSUblake Posted November 20, 2019 Share Posted November 20, 2019 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. 2 Link to comment Share on other sites More sharing options...
ericshew Posted November 20, 2019 Author Share Posted November 20, 2019 Okay. Thanks for the information. I missed some of the resources you guys pointed out on my initial review. I appreciate your help. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now