[css-d] JavaScript animations and CSS animations in web apps

2012-10-02 Thread Gabriele Romanato 
I generally tend to use CSS3 animations in mobile web apps whenever it's
possible, but sometimes I get stuck when the app's requirements are too
complex. So I usually mix up basic CSS3 animations with JS routines in
order to not end up with messy markup as in many Codrops examples (you
know, form elements used to create slideshow effects and so on).

What I don't really know is if there's a common best practice to follow
when creating complex web apps which feature a lot of advanced effects.
CSS3 animations are faster than JS animations, but when your boss or your
client has a Flash-like idea about how your effects should be made, well
it's difficult to me to stick to pure CSS animations.

What's your approach when you design complex web apps?
I'd really like to get some hints about the role of CSS animations in that
context.

Thanks in advance.
Gabriele


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] JavaScript animations and CSS animations in web apps

2012-10-02 Thread Barney Carroll 
Hi Gabriele,

This question has been much on my mind – I've experimented with a lot
of methods and to be perfectly honest I'm still experimenting project
by project. Pertinently, an interesting article recently appeared on
the Opera development blog about just this subject [1].

Generally what I end up doing is putting UX-crucial animations in
script and decorative effects in CSS. For a recent project [2] I used
CSS transitions for in and out visual transitions – for most browsers
that don't support CSS3 transitions, jQuery animations can end up
being so performance-hungry the effect ends up so jerky it's not worth
it – but then there are effects such as the blue video playback bar
which are arguably crucial to the experience, and these are enforced
with jQuery animate.

There are some libraries out there that attempt to help. If you're
just after the GPU-enhancement of CSS3 animating properties, but want
to trigger and sequence these with script, jQuery Transit can help
[3]. If you would like to continue using jQuery animate but use CSS3
transitions where possible, there are polyfills such as $.transition
[4] – however my experience with this was that in many scenarios, it
failed completely.

Interested to see what other people have found on the subject.


[1] http://dev.opera.com/articles/view/css3-vs-jquery-animations/
[2] http://www.operadiperoni.com/
[3] http://ricostacruz.com/jquery.transit/
[4] https://github.com/louisremi/jquery.transition.js



Regards,
Barney
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] JavaScript animations and CSS animations in web apps

2012-10-02 Thread Gabriele Romanato 
Thanks so much Barney! :-)


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/