Jump to content
GreenSock

Azatha

AJS 5 => AJS 6 : ERROR TypeError: Cannot create property '_gsTweenID' on string ...

Recommended Posts

Hello,

 

I'm using GSAP on Angular porject. Everything works fine on version 5.

After moving to version 6 : tween code not working anymore, i got this on console : 

 

core.js:1598 ERROR TypeError: Cannot create property '_gsTweenID' on string '.content'
    at _register (TweenMax.js:7201)
    at new <anonymous> (TweenMax.js:6961)
    at Function.push../node_modules/gsap/TweenMax.js.TweenLite.to (TweenMax.js:7755)

...

 

Implementation of Tween on the code is done like this :

 

TweenMax.fromTo(

'.content', .4,

{ top: '100%' },

{ top: '0' }

);

 

if i use document.querySelector('.className'), this is working as dom element is sent.

But on chaining animation got new error in console :

 

ERROR Cannot tween a null target

 

Hope the report is clear enough, please fill free to ask for more detail if need.

 

Best Regards

Arnaud

 

 

 

  • Like 1
Link to comment
Share on other sites

I have no experience with angular, is there any significant change from one version to another? It really sounds like it's an issue with the bundling of your project rather than GSAP.

  • Like 1
Link to comment
Share on other sites

Yeah, it almost seems like window.document isn't defined in your environment or something (so GSAP can't do the document.querySelectorAll()). And the same thing goes for the "cannot tween a null target" - that means that the element literally doesn't exist at that point. For example, that'd happen if you ran the script BEFORE the elements are defined, like:

<script>
TweenMax.to("#el"...); //doesn't exist yet!!!
</script>
<div id="el"></div>

 

See what I mean?

  • Thanks 1
Link to comment
Share on other sites

First of all, thanks for your answers.

 

In my case element exist, and if i do a console.log of this element before throwing the animation, i do have tit.

We had think of scope of document on angular and do an import of it, and sadly still not working.

 

Anyway Angular 6 is available since a week. I will continu searching a way to keep using GSAP on it.

 

Regards

Link to comment
Share on other sites

Same problem here, 
code works in angular 5.x so i will stick to it and wait for a proper soulution/fix.

Strangest part about this is that i cant recreate the error on stackblitz - here everything works. 
https://stackblitz.com/edit/angular-ygwyjm

Link to comment
Share on other sites

Same problem here,

Could it be because of other module?

Link to comment
Share on other sites

7 hours ago, Azatha said:

In my case element exist, and if i do a console.log of this element before throwing the animation, i do have tit.

We had think of scope of document on angular and do an import of it, and sadly still not working.

 

Hm, do you have a demo that shows that? I just can't imagine how you could console.log() the target and get something, but immediately after that when GSAP tries to access it, it's gone/null. I'd really like to see it. I'm not saying you're wrong - I just can't figure out how it could happen. 

 

The fact that it works on stackblitz is another indicator that the problem may be in your build system (not GSAP). Super difficult to troubleshoot blind, though. Any chance someone could post a reduced test case that shows the issue? 

Link to comment
Share on other sites

No probleme did the same misunderstanding. 

 

Will do a basic test tomorrow and edit my post. 

 

After as ajs is all based on observable could be first undefined and then dom element as console will set value of the last one. But This is Just à sa totry to understand This behavior 

Link to comment
Share on other sites

I have created new project:
 

ng new test


Then I have installed latest gsap:
 

sudo yarn add gsap


Then I have created simple Tween:
 

TweenMax.to('body', 0.5, {background: 'red'});


And this way we get an error which I have attached down below.
Also, here is my package, if that might be some case:
 

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "gsap": "^1.20.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "~6.0.1",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }



Not sure if the best way is to wait for some Angular updates, or GSAP updates, or find a sneaky solution.
NOTE: Error goes and goes (looped).
 

Screen Shot 2018-05-20 at 15.16.11.png


UPDATE:

I have successfully managed to launch a Tween by referencing DOM with ViewChild type, as well as basic JS document.getEle... calls. So for now seems like we have to get element before calling Tween methods.

Link to comment
Share on other sites

Thanks for reporting back. Yeah, that definitely sounds like an issue with the document.querySelectorAll() not being available...thus your selector text ain't selecting anything and GSAP is treating it like a literal string. Have you tried testing to see if document.querySelectorAll is available right before that tween? Like console.log(document.querySelectorAll)?  Sounds like Angular or your build system is doing something funky with that. 

Link to comment
Share on other sites

2 hours ago, GreenSock said:

Thanks for reporting back. Yeah, that definitely sounds like an issue with the document.querySelectorAll() not being available...thus your selector text ain't selecting anything and GSAP is treating it like a literal string. Have you tried testing to see if document.querySelectorAll is available right before that tween? Like console.log(document.querySelectorAll)?  Sounds like Angular or your build system is doing something funky with that. 


As I mentioned in my update, calling document.querySelectorAll before a Tween and then passing it by works.

Link to comment
Share on other sites

Aha! I see what you mean now, and I think I figured it out. Angular was somehow loading GSAP before "document" was even defined, thus when it internally cached that as a variable, it was undefined. That explains why you were able to see "document" right before you did your tween, but it still wasn't defined inside GSAP. Kinda weird that Angular would do things in that order, but I think I've got a workaround in place in the upcoming release (due out VERY soon). In fact, we're also switching to ES modules in the default package that'd distributed via NPM, and that seemed to resolve things anyway. Please give these files a try: 

 

https://greensock.com/temp/GSAP-ES6.zip

 

Better? 

 

Notice there's a "umd" directory if you still need that older style, but I don't think you will. ES modules appear to work great in that environment. Please let me know if those updated files resolve the issue for you. 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

13 hours ago, GreenSock said:

Aha! I see what you mean now, and I think I figured it out. Angular was somehow loading GSAP before "document" was even defined, thus when it internally cached that as a variable, it was undefined. That explains why you were able to see "document" right before you did your tween, but it still wasn't defined inside GSAP. Kinda weird that Angular would do things in that order, but I think I've got a workaround in place in the upcoming release (due out VERY soon). In fact, we're also switching to ES modules in the default package that'd distributed via NPM, and that seemed to resolve things anyway. Please give these files a try: 

 

https://greensock.com/temp/GSAP-ES6.zip

 

Better? 

 

Notice there's a "umd" directory if you still need that older style, but I don't think you will. ES modules appear to work great in that environment. Please let me know if those updated files resolve the issue for you. 

 


ES6 Package works perfectly - anything can be called within a Tween like a charm! I still have issue referencing body element. It throws an error (see attachment) whenever I reference body tag - either by querySelectorAll or directly in a Tween call. Not sure if it's meant to work like this, I've never been referencing a body tag, but yeah, there's an error :D 

Also, from this quick try, transition does not work with ES6, but I guess you're on it :D
 

TweenMax.to('body', 1, {background: 'red'});


 

Screen Shot 2018-05-22 at 10.11.16.png

Link to comment
Share on other sites

Glad to hear the ES6 stuff works well. As for the <body> not working, I bet you just called your script in the wrong order. In other words...

//BAD:
<script>
TweenMax.to("body"...); //<body> doesn't exist yet!!
</script>
<body>
...

 

//GOOD:
<body></body>
<script>
TweenMax.to("body"...); //no problem. <body> exists.
</script>

 

Does that resolve things? If not, please post a reduced test case that I can take a peek at. 

Link to comment
Share on other sites

Version 2.0.0 (out now!) should work well with Angular. Let us know if you run into anything else. Happy tweening!

Link to comment
Share on other sites

Thanks a lot to all community.

 

Works just fine on v2.0.0

Will be able to still tweening

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

I'm glad I found this conversation.  I was having the same problem when I was transferring an app from VS 2019 community to codepen.io.  It worked fine with React and node.js and using MS Edge.  But, on codepen.io, I was getting an error in the Chrome console, Type Error: Cannot create property '_gsTweenID' on string '#el' followed by an infinite loop error Uncaught Type Error: Cannot read property 'length' of undefined.

 

After reading this conversation, I solved my issued by creating a jQuery-like function (sorry, I'm still new to coding and haven't delved into jQuery yet):

function $(x) { return document.getElementById(x); };

 

and then changed all of my tween targets from :

.to('#el',SPD,{animation:object})

to:

.to($('el'),SPD,{animation:object})

 

The app works like it should now.

Thanks again everyone!

Link to comment
Share on other sites

Glad you figured out a solution, @mtkramer, but I'm a bit baffled. Are you saying that even version 2.x of GSAP wasn't working for you? 

Link to comment
Share on other sites

I added gsap 2.1.3 through the pen settings rather than adding a <script> element.  Maybe that is the problem...

Link to comment
Share on other sites

When using any type of framework (Angular, React, Vue, etc) you should ALWAYS access elements through reference variables (refs). Using selector text is bound to cause problems.

 

You mentioned you were using React, so you might want to check out this page.

https://greensock.com/react

 

 

  • Like 1
Link to comment
Share on other sites

I will definitely give it a read.  If you saw my app's code, you might have a stroke.  I'm sure I butchered it good, especially since it's difficult to click the buttons, especially on small viewports, and long quotes overflow the buttons off the bottom.  But I hacked it into passing freecodecamp.org first test for front-end certification after working on this for awhile.  Yay!

 

See the Pen OqVpzO by mtkramer (@mtkramer) on CodePen

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