blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.21k stars 2.48k forks source link

4th gen source / domains license / IOS glitches / sluggishness on Chrome/Firefox/Opera/Safari #276

Open chonselaar2 opened 11 years ago

chonselaar2 commented 11 years ago

I did not receive any reply on emails to blasten@gmail.com, so I will try here.

I am considering purchasing a (4th release) license for turn.js, however I do have a few questions:

  1. It seems you have not open-sourced the newest release of turn.js? Will we get the full source code when we purchase a commercial license? This is important for us, because we will in all likelihood need to make some modifications to the script to work for our scenario.
  2. The order page only talks about a license for ‘up to 5 domains’. Our HTML5 application would also be distributed for offline usage (packaged with XULRunner probably) and as a hybrid app for iOS and Android. What kind of license would we need?
  3. There is a jarring visual glitch on all iOS devices we have tried (iPad 1/3, iOS 5/6, iPhone 4S, iPod Touch 4th gen), and it manifests with all demos on turnjs.com: after each page turn, the left page will flicker back to the previous page briefly, then return to the new page. It only fully goes away after turning all pages once. It is 100% reproducible for me on all devices. This glitch really breaks the effect of the page turns, so at this point it seems it is not fully ready yet for iPad/iPhone use? Or is this fixed in the latest release?
  4. Performance is good on IE9 and iOS, but the page turn animation gets quite choppy on Google Chrome, Mozilla Firefox, Opera and Safari (latest builds, all on Windows 8 x64). Safari is slightly better than the rest. Again, looking at the demos on turnjs.com. It happens especially when zooming in. For our needs would need to display books fullscreen, maximum size. This is also manifest on fast desktop machines with good video cards. Looking at the CSS through Web Inspector, it seems no 3d hardware accelerated CSS3 transforms are used? Is this different in turnjs 4th release? If the animation is too slow to use full-screen, we cannot really use it. Of course we would check beforehand if a browser supports GPU acceleration, if not, we would default to a simple fade animation.

Looking forward to your answers and using your wonderful script!

closdesign commented 11 years ago

I think the one on the turnjs.com is using the 4th generation version. Since this is an ALL Javascript version of a Flipbook and running from a browser there is going to be issues with devices.
iOS is notorious for having issues with Javascript and animations in browser, even with hardware acceleration. iOS stops processing Javascript animations for some reason or another in browser when some Javascript functions are fired. Simple accordion or fade and show animations using jQuery chug on iOS devices. I think Apple does it on purpose. This is a processor issue with iOS products and processing Javascript though it's browser. This is documented all over the web.
So not everything is going to be as smooth though a total Javascript version of something through the browser vs a native app. That is just the way things are working at the moment. Apple seems to be wanting to keep the native app market open vs wanting to give into HTML5 browser apps that are free on the web that can do much of the same things some native apps can do. We have been using TurnJS version 4 for a few months on a couple of our magazines.
There is a lot to consider when using this too. Since this uses images, resizing images is needs to be taken into consideration. What is your audience and devices you are targeting, stuff you probably already know a lot of. There are also 2 types of zoom transitions this does too in version 4.

  1. Is keeping 1 image per page resized to the smaller default size and then it zooms into the full sized image.
  2. Uses 2 images (1 default image and 1 large zoomed image) that switch out the source of the default image to the large image on zoom.

To your number 4 question about hardware acceleration, there is hardware acceleration as an option in version 4 as an option in the JS.

That all being said, we did A LOT of research on what to do for an alternative to a Flash version or a native app (too many devices and too much work) of a Flip book and this one is BY FAR the best option we found. The license issue is really not that much, but of course that question can be answered by the creator of this script.

If you want to look at something another really well known company did with Turn JS, check out Fantasy Interactive's version of their magazine using Turn JS. It is pretty slick. https://github.com/FantasyInteractive/magazine. They used the free version 3 of Turn JS and did a really good job with it.
They made a site that uses Turn JS for some of their client's online magazine. Examples can be seen http://glimpse-ie.thefind.com/glimpse/catalogs/merchants and behind the scenes or how they did it: http://glimpse-ie.thefind.com/magazine/teardown2#page-1

Hope any of this info helps out. But like I said this is our experience. The author of the script can answer more indepth.

josimard commented 11 years ago

I am experiencing "sluggishness" on iOS too, I will open a issue just for that.

digitalbart commented 11 years ago

I am also experiencing choppiness in Google Chrome. I am using this on Samsung Tab 2 Andriod tablet. It appears the turn.js version 3 used in Fantasy Interactive's magazine works much smoother. I may use this until the bugs are fixed in version 4.