Is there a good Animations application for HTML5, CSS and JavaScript?, thanks

[joejac]

Hello to all,

I have a customer that wants animation in his logo, that would be easy with Flash: an image object entering the page from left to right, and after a delay the name of his company in same way.
Unfortunately I have read this article from Steve Jobs, and now I think that I should use HTML5, CSS and JavaScript as per Mr. Jobs recommendation, and I do not have much experience with those together.
http://www.apple.com/hotnews/thoughts-on-flash/

My question: is there an affordable, easy to use software that will allow me to make images and letters animation and creates the required HTML5, CSS and JavaScript code for me?
Hope I was able to explain myself.
Best regards
joejac

[dresden_phoenix]

And I that thought that the days of the gaudy "spinning flaming logo" were over. To my knowledge I don't know of any WYSIWYG application that writes .js/CSS animation code. Add to this that HTML5 is a still a DRAFT and am afraid few coders would venture to develop an app for standard that isn't finalized yet. Also, that was the point of getting away from Flash was to make CODE /CONTENT meaningful an accessible.

HOWEVER... if you are already somewhat familiar with HTML ( any ) and CSS3 there might be a way of doing this w/o a program.


1) think graceful degradation. A fall back for browsers that don't support HTML5 and CSS3 ( you would have had to have done this anyway)
2) think accessibility ultimately it should just degrade to text ( screen readers cant see funky spinning logo.. they should just read out the company name)
<h1><img classs='logo' src='logo.png'> <span>L</span><span>O</span><span>G</span><span>O</span></h1>
3) use CSS3: transforms and animations. You can assign fonts, spin/rotate, translate any element with transforms; repeat, alter and delay movement. I realize it wont be as right brained as using Flash, but definitely not as left brained as .js

[joejac]

Hello dresden_phoenix and thanks for your advice.

What do you think of using jQuery?. Many years ago I was able to do a simple entry page with a very basic effect in jQuery, I even do not remember how I did them, I have to study back It might be less painful than working in pure HTML5, CCS3 and javascript. I appreciate if you, or somebody, knows and can post some links to jQuery professional effects. In Google there are tons of jQuery scripts, but I do not know which to use

Best regards
joejac

[dresden_phoenix]

Well , jQuerry is js library, whose claim to fame is to make targeting elements simple vice CCCS-like selectors.
1) You would add weight of the jquery library + your script to your page
2) CSS3 animations are supported by pretty much all current browsers ( so unless you offer IE7-8 support, or like FF4 support, you can do this w/o jQ)
3) since jQ targets ELEMENTS via a notation that is similar to CSS, eg.: $("#wrappr div>p span a").text("am new text"), you essentially would have to be familiar with jQ, javascript and CSS notation anyway.

while not exactly what you asked, this link might be helpful:

http://www.tripwiremagazine.com/2012...animation.html

Note the AI to canvas plug in, btw

[joejac]

Hello and thanks a lot to all for your answers.
dresden_phoenix, your recommendation gives me confidence in what I decided on the weekend, I found a lot of stuff in animation. And I had thought that the simplest and cleanest way is using CCS3. It is not going to look like in Flash, but this is the new way.
Thanks a lot to all for you kindness and valuable time to answer. I am going to study the links and the CCS3 related documentation.
Best regards
joejac

[joejac]

Hello and thanks to all.

I did my first animation in pure CSS3 when loading the page.
These are the resources:

1.- THE BASICS:
http://www.ubelly.com/2012/01/the-fi...ss-animations/
I adapted this example and it worked like a charm
1.1 You have to use keyframes to automatically activate the animation when the page loads, this link shows the difference among the CSS instructions:
http://stackoverflow.com/questions/6...mation-on-load

CSS3 transition-delay, a way to delay effects on elements. Only works on hover.
CSS3 Keyframe, works on load but are extremly slow. "FROM MY TESTS, IT IS NOT TRUE THAT IS SLOW, joejac"
CSS3 transition is fast enough but do cheer up on page load.

2.- This link also served as another basic data on animmation and examples:
https://developer.mozilla.org/en-US/...CSS_animations

There are tons of information, examples and tutorials but difficult to understand, the above links where easy for me to grasp.

Hope this can help
Best regards
joejac