4 ms·

This actually looks quite awesome, which is a stretch for me considering my opinion of Adobe lately. I've always wanted to make a similar tool for JS animation

This actually looks quite awesome, which is a stretch for me considering my opinion of Adobe lately. I've always wanted to make a similar tool for JS animations, but never got around it.

DjDarkman 16y ago
It uses jQuery, and it generates jQuery/JavaScript code, which is good because you could check it out and learn it. I learned SQL with PHPMyAdmin, so I think you may be able to actually learn how this works behind the scenes.
- jayphelps 16y ago
  Correct me if I'm wrong (I may well be), but I was under the impression the JS aspects were used for things not implementable in CSS3/HTML5 spec? With the generated animations being done primarily in CSS3 (but maybe a JS fallback?) I'm having a hard time finding official/reputable info on this, so if you've seen it please share. =) If it does just use JS for animations, it's quite deceiving to call this an HTML5 animation tool. Though I'm aware the CSS3 spec isn't officially part of HTML5, I think most people assume it is.
  - DjDarkman 16y ago
    Quote from http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html http://www.optimum7.com/internet-marketing/web-development/p... "Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene." Being able to correctly time your animation is at least as important as the effects themselves. You don't get it with CSS not even CSS3. To be more specific: http://api.jquery.com/animate/ http://api.jquery.com/animate/ TL;DR: the animation logic can only be done in JavaScript, CSS does not have such a feature, and it doesn't even need to because it's fine to do that in JavaScript.
    - jayphelps 16y ago
      Sorry to be "that guy" but looking at the source, he uses JS just for changing scenes and sometimes for opacity (the latter of which can be done w/ CSS3) When I was referring to animations, I meant the actual transformation of the element/object, which he does use CSS3 for. I'm a jQuery user myself, along with plenty of CSS3 action, and I was indeed aware you still need to use JS for scene changes and triggering CSS3 animations. Why I want this tool to use CSS3 for the actual animations themselves is the performance. I'm not sure what voodoo browsers use to make CSS3 animations so much more smooth then the equivalent JS animation, but it's so noticable. Especially on iOS devices. Thanks for the link, I hadn't seen this example before and it rocks!
  - fourneau 16y ago
    Either way, it'll be a great learning and prototyping tool. Not to mention it's great to see some interesting web development tools that offer a little more than code completion/syntax highlighting. Hopefully Adobe carries this through to a product (or even better, a free tool?) and doesn't let it die as a prototype.

This actually looks quite awesome, which is a stretch for me considering my opinion of Adobe lately. I've always wanted to make a similar tool for JS animations, but never got around it.

DjDarkman 16y ago

It uses jQuery, and it generates jQuery/JavaScript code, which is good because you could check it out and learn it. I learned SQL with PHPMyAdmin, so I think you may be able to actually learn how this works behind the scenes.

jayphelps 16y ago
Correct me if I'm wrong (I may well be), but I was under the impression the JS aspects were used for things not implementable in CSS3/HTML5 spec? With the generated animations being done primarily in CSS3 (but maybe a JS fallback?) I'm having a hard time finding official/reputable info on this, so if you've seen it please share. =) If it does just use JS for animations, it's quite deceiving to call this an HTML5 animation tool. Though I'm aware the CSS3 spec isn't officially part of HTML5, I think most people assume it is.
- DjDarkman 16y ago
  Quote from http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html http://www.optimum7.com/internet-marketing/web-development/p... "Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene." Being able to correctly time your animation is at least as important as the effects themselves. You don't get it with CSS not even CSS3. To be more specific: http://api.jquery.com/animate/ http://api.jquery.com/animate/ TL;DR: the animation logic can only be done in JavaScript, CSS does not have such a feature, and it doesn't even need to because it's fine to do that in JavaScript.
  - jayphelps 16y ago
    Sorry to be "that guy" but looking at the source, he uses JS just for changing scenes and sometimes for opacity (the latter of which can be done w/ CSS3) When I was referring to animations, I meant the actual transformation of the element/object, which he does use CSS3 for. I'm a jQuery user myself, along with plenty of CSS3 action, and I was indeed aware you still need to use JS for scene changes and triggering CSS3 animations. Why I want this tool to use CSS3 for the actual animations themselves is the performance. I'm not sure what voodoo browsers use to make CSS3 animations so much more smooth then the equivalent JS animation, but it's so noticable. Especially on iOS devices. Thanks for the link, I hadn't seen this example before and it rocks!
- fourneau 16y ago
  Either way, it'll be a great learning and prototyping tool. Not to mention it's great to see some interesting web development tools that offer a little more than code completion/syntax highlighting. Hopefully Adobe carries this through to a product (or even better, a free tool?) and doesn't let it die as a prototype.