Jump to content
Search Community

Possible To Remove Plugins from GSAP builds

c.marrin519 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello All,


We've run into an issue using gsap with Cocos Creator native builds.  It seems like some updates they've done recently has caused conflicts with gsap.  Previous versions of Cocos Creator had no issues.


From what I can tell, the Creator runtime dies when it hits:


_createSVG = function(type, container, attributes) {
  var element = _doc.createElementNS("http://www.w3.org/2000/svg", type),
      reg = /([a-z])([A-Z])/g,
  for (p in attributes) {
    element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
  return element;


The container.appendChild(element) line.  I get an error along the lines of:


ERROR: TypeError: container.appendChild is not a function. (In 'container.appendChild(element)', 'container.appendChild' is undefined), location: src/project.dev.js:5718:34


I'm wondering if there's not some DOM elements trying to be accessed that don't exists (the cocos runtime has no real DOM).


This function appears to be part of the CSSPlugin.  I'm wondering if there's a way to remove the CSSPlugin cleanly from gsap.  If anyone could point me in the right direction, I would appreciate it.  I didn't find any information regarding custom builds or removing plugins in any of the documentation.


Thanks for the help, and thanks for the great lib!

Link to comment
Share on other sites

Hi, thanks for replying!


I will give that a shot when I get back to the office in the morning.


I'm not sure if that will completely solve the problem.  We have completed project deployed to web, and we're attempting to make native versions as well.  We use TweenMax and TimelineMax extensively throughout.  We're using methods/properties like repeat and yoyo that  I believe are only available in Max versions (unless that's just me remembering something from the AS3 version).  If that is not the case, then we're golden, otherwise, I may need to continue down this path.


Thanks again!

Link to comment
Share on other sites

You are correct. repeat() and yoyo() are only available in TweenMax. I wish I could offer more assistance, but I have no familiarity with Cocos Creator. I don't even recall it being mentioned in the forums before today. 


Best of luck and happy tweening.



  • Like 2
Link to comment
Share on other sites

I'm curious about the error you're getting. It almost sounds like there's no document.documentElement or something. Is there any way to create a reduced test case that can either run in codepen or locally so that we can see this happening for ourselves? I've never heard of Cocos Creator, so I'm afraid I can't be of much help with that in particular. 


Are you using the latest version of GSAP (2.1.2)? 

  • Like 1
Link to comment
Share on other sites

Hi Jack,


Yes, that's very likely the case.  Cocos Creator builds out to a custom JS engine for native platforms.  Their custom engine likely does not implement document.documentElement or the DOM at all.  That's why I wanted to see if I could remove CSSPlugin, because as far as I can tell, it's the only thing that's trying to to access the DOM directly like that.  We're using 1.20.6 at the moment.


It's not meant to be a web view, it's a game engine.  Sadly, I don't think there's any way to produce a codepen because of it being this custom native engine, rather than part of a browser or something like that.  Honestly, I wouldn't expect you guys to support Cocos at all, it's not really common.


Thanks again for taking the time to respond!

  • Like 1
Link to comment
Share on other sites

I'm curious if this version resolves things for you:



You could technically remove CSSPlugin from the TweenMax file, but it's not really something I'd recommend. 

Another option is to add some code to your app that declares a generic document.documentElement object that has an appendChild() method, like:

document = {
    documentElement: {
        appendChild: function() {}


I'm not sure exactly how things are structured or defined in your app's ecosystem, so you may need to tweak that and/or make sure it runs BEFORE CSSPlugin is loaded. 

  • Like 1
Link to comment
Share on other sites

I tried that beta, and had the same issue as before.  I looked into it, there is document, and it has documentElement on it, but that documentElement did not have appendChild defined.  So, I assigned an empty function to appendChild on that documentElement, and it actually progressed past where it would usually crash. But then it stopped with the following message.


ScriptEngine::evalString script src/project.dev.js, failed!
ERROR: TypeError: element.setAttributeNS is not a function. (In 'element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p])', 'element.setAttributeNS' is undefined), location: src/project.dev.js:5803:57


I did just try completely removing CSSPlugin from TweenMax a little less than an hour ago, and that did indeed work.  I just hadn't had a chance to post my results yet!


I really appreciate the work you put into this!  I'm good, but I'm more than willing to help if you want to work through to a less dire solution.


Please let me know, and thanks again for the help!

Edited by c.marrin519
Missed an important sentence!
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...