Problems with CocoonJS

[richpixel]

TweenLite is my tweening engine of choce, but sadly it doesn't work inside CocoonJS. When it reaches a TweenLite method the app literally 'stops dead' - with no error reported in the console. If there's a workaround great, but I really just wanted to report this as CocoonJS is pretty new.

 

-rich

 

[GreenSock]

I've generally heard good things about CocoonJS, although I've never used it. I can't imagine why GSAP wouldn't work with it, as GSAP is just plain-old JavaScript. Hm. Can you whip together a SUPER simple set of demo files (codepen would be awesome, but you could just zip some HTML/JS files and post them here using the "More Reply Options" button below) so that we can see what's going on (or NOT going on)? Again, the simpler the better. 

 

Thanks!

[richpixel]

Yes... let me boil it down to just a few TweenLite calls and see if it still fails. For all I know it may be some other interaction in my code that's causing this. I believe in order to run the demo you would need a CocoonJS account and then the iPhone launcher. I'll come back here and post a zip once I know for sure there is an issue.

[richpixel]

Jack - The good news is that in very simple tests inside CocoonJS with TweenLite - it works - everything is normal.

 

I happen to be using Pixi.js as my rendering engine... so now I think there may be some collision between the frame update that pixi uses and TweenLite. I misspoke somewhat above when I said the code stopped dead - actually it's pixi that stops getting render updates. TweenLite calls complete as normal. I'll dig some more and let you know if I find anything interesting.

[GreenSock]

I wonder if TweenLite is doing its job perfectly (tweening the values), but Pixi needs you to call some sort of update() or render() method to actually render the changes visually to the screen/canvas/whatever. Just a guess. 

[momothemonster]

I'm seeing this as well - running Phaser (which uses PIXI for rendering), using TimelineMax to manage some looping audio stuff. If I create a TimelineMax, I get a black screen when running in CocoonJS using the Canvas2D/WebGL settings.

 

This also happens if I create a TweenLite, TweenMax, etc.

[jamiejefferson]

If you need help with this please read this post. We unfortunately do not have the time or resources to build your environment from scratch in the hopes we might stumble upon the exact situation you're referring to. If you can provide us something to look at that would go a long way to helping you find a solution.

[momothemonster]

Fair enough - I've put together a test.

 

Here's the code: 

See the Pen ukLeb by momothemonster (@momothemonster) on CodePen.

 

Unfortunately, Cocoon doesn't seem to work with codepen.io at all, so I've uploaded the tests to a server of mine.

 

Working: http://mmmlabs.com/serve/gstest/index.html

Non-Working: http://mmmlabs.com/serve/gstest/gsap.html

 

The scene should display an image and tween it to the upper-left corner of the stage. If you load these two urls in the browser, index.html will display a non-moving image, and gsap.html will display the image and then move it. If you load them into Cocoon using Webview/Canvas2D, index.html will display a non-moving image, and gsap.html will display nothing at all.

 

The only difference is the call to TweenLite in gsap.html.

[GreenSock]

I looked at the two examples and everything seems to work perfectly, so I'm a little confused - you mentioned loading them "into Cocoon using Webview/Canvas2D" - can you elaborate on exactly how to do that so that we can see the problem? I have never used Cocoon. This certainly sounds like an issue on Cocoon's end, but since you're posting here I assume you think it's a GSAP problem, right? Have you asked the Cocoon folks? Are you using the latest version of both libraries? Are there any errors reported at all?

[momothemonster]

Thanks for the reply. Cocoon has a launcher you can download for iOS and Android and point towards an html page that it will load into its accelerated environment.

 

The issue is probably not with your library specifically, since there are currently other ways to trigger the same bug. It's probably within Pixi or Phaser. I cross-posted this issue to a Phaser forum and we're taking a look there. I'll update this thread when we figure it out, for the sake of future searchers.

 

Cheers!

[GreenSock]

Great. For what it's worth, there was another thread here that exposed some bugs in an older version of PIXI and once they updated to the latest version of PIXI, things were fine. So you might want to just double-check and make sure you've go the latest and greatest.