Jump to content
GreenSock

richpixel

Problems with CocoonJS

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

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

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