Mobile performance

[sar]

Hello,

 

I am scoping out a project that an agency has done some initial specs for. The project involves a map of sorts, more or less a game map, that you can zoom in on and pan around on. Within the map are interactive elements that pull up information and other media.

 

This needs to work across desktop, tablet and smartphones.

 

The agency had recommended that we do two separate builds

 

- one in Flash for desktop

- another in html5/CSS3 for tablet/phone

 

Their rationale was that we could not do a single build using Javascript to handle the animation because it would not perform adequately on mobile.

 

I would prefer to do a single build using just gsap that would work on all devices (along with media queries, other responsive techniques). Do you feel that gsap could handle the animation adequately on smartphones? The animation does not seem like it should be very intense - basically tweening objects in scale and position. There would be other elements embedded in the main map being tweened, but we could find ways to hide or fake those until the tweens had completed.

 

Any help would be greatly appreciated.

 

Thanks

Scott

[GreenSock]

First of all, yes, GSAP is quite fast on mobile devices (see our speed test at http://www.greensock.com/js/speed.html) but typically the biggest bottleneck in a project like the one you described is NOT going to be the animation engine itself - it's gonna be graphics rendering in the browser itself. It might take 0.00000001 seconds to calculate the scale of the image for each frame, but 100x as much for the browser to actually draw all the pixels. See what I mean?

 

Flash will almost always be faster, but if your project requires that things work in the browser on an iPad/iPhone, that simple isn't an option (as I'm sure you know), so my advice would be to try doing some prototypes in HTML5/JS to see if it performs well enough. If so, only build one version (skip the Flash one). It'll save you a lot of headaches. Well, unless you must have it work in IE6 on the desktop or something - then Flash is gonna be your best bet for sure.

 

The nice thing is that GSAP is available in both Flash and JS and both flavors use the same syntax so hopefully that'll make things a little easier for you if you have to split the development.

 

Let us know when you launch - we'd love to see what you're building.

[Joe Hakooz]

For what it's worth, I just replaced simple jquery animations (fadein/out, width/height) in a PhoneGap project and the results are night and day. GSAP is king.

 

A month or so ago I used GSAP beta JS to do slightly more advanced animations and again the result was super good. IE chugs a little, but I'd try to sell a pure JS version if you can.

[jamiejefferson]

Also, if you find your application is a bit too intense for mobile devices, you could try adaptively reducing the duration of your non-essential tweens, and in a lot of cases the trade off can be 'good enough' e.g.

var tweentime = (detect mobile in preferred manner) ? 0 : 1;

// smooth movement on pc, simple jump on mobile
TweenMax.to(target, 0.5 * tweentime, { css: { left:100 } });

 

(I often apply a similar thing to older IE browsers to prevent those unavoidable 2fps animations when the animation isn't strictly 'necessary')

[gerrydesign]

I'm might have similar project and I am advocating creating apps for mobile and tablet to access content and flash player in browser when viewed in desktop. Both then will have similar as3 source files with mobile and tablet animation handlers perhaps.

 

Users nowadays would be more incline to see rich media content as native app than in browser when consuming content in tablet or smartphone anyway.

 

What are u guys' thought on that approach?

[GreenSock]

It depends on the content. Frankly, for a lot of sites it is very reasonable to expect that mobile phone and tablet users will just crack open their browser and navigate to the site and expect it to work. If you build everything in AS3 and expect users to download an app to consume the content, you're throwing up a hurdle that may turn many of them away. I have gone to several sites that pestered me about installing an app and I thought to myself "nah, this ain't worth it to me - I don't want yet another app on my device".

 

As a developer, I LOVE the idea of having a single code base for everything. As a user, I want to be able to navigate to a site and have it work on my tablet.

 

If it's very specialized content or video-heavy or extremely rich in terms of animation and it requires performance that mobile browsers can't achieve, then yes, I think it's better to go the native app and swf route. No question.

 

Budget matters too - I'd guess that building an HTML5 site that's relatively rich is going to eat up 50% more budget to build than a straight Flash solution (total ballpark) because of all the browser inconsistencies, debugging, etc. that HTML5 stuff requires these days. Ultimately you and your client need to sit down and determine if the extra investment is worth it for your particular project. Sometimes the answer is a definite yes. Sometimes other priorities win out and a straight Flash solution better achieves your goals. There really isn't a generic answer that fits every project.

 

I hope that at least gives you some food for thought. Good luck with the project!

[gerrydesign]

Thanks Jack for sharing your perpective. I'm a huge proponent of function first before design. There web is saturated with diverse content info clutter and I think it has reached a tipping point that users will demand specific content on a specialized app. They will download apps if they find the subject compelling enough to go on the extra hurdle to learn more.

 

Again thanks for the awesome product that made people without exotic programming background do amazing things.