5 ms·

This is a fine animation. Congratulations for syncing sound and getting a good narration voice. I guess you used a JS library to achieve this. My difficulties w

This is a fine animation. Congratulations for syncing sound and getting a good narration voice. I guess you used a JS library to achieve this. My difficulties with CSS3/HTML5/JQuery animation as of "t.o.d.a.y" are: 1. If one has to programmatically create all animations, then browser based animation is at same stage as 1985'ish BYTE issues where drawing a chess grid in CG was a major achievement. A lot of great animation work is done by animators who don't code or won't code (http://www.ninapaley.com http://www.ninapaley.com). Flash provides timeline to achieve this. The newer Edge is nowhere close to that level of fineness. Where are the tools for animators who animate to create these animations? (Psst. We need another Flash!). 2. Most of the current animation we see in CSS3/HTML5/Jquery is boxy, geometric stuff. Where are animated characters? and how easy is it to do it all in one environment like Flash? I am not a banner holder for Flash but it did provide a good integrated environment to draw, animate and code too. This is neither a rant nor any stand. I am just wishing that tools develop faster and better so that animators who visually create animation can do cool stuff in browser based animations. Thanks for sharing a nice work of art :-)

MojoJolo 14y ago
Your first difficulty is also my concern / question. Are there still no IDE that can do those animations? I know that there will be in the future. But I hope it will happen soon.
- ryanac 14y ago
  Edge: http://html.adobe.com/edge http://html.adobe.com/edge A5: http://www.a5-animator.com http://www.a5-animator.com Hippo: http://hippostudios.co.uk http://hippostudios.co.uk Sencha Animator: http://www.sencha.com/products/animator http://www.sencha.com/products/animator Motion Composer: http://www.aquafadas.com/en/motioncomposer http://www.aquafadas.com/en/motioncomposer Mac Only: Purple: http://www.purpleanimator.com http://www.purpleanimator.com Tumult Hype: http://tumult.com/hype http://tumult.com/hype Online/Cloud Based Tools: Mugeda: https://www.mugeda.com https://www.mugeda.com Blysk: http://bly.sk http://bly.sk
  - rudasn 14y ago
    Thanks for the list. Do you know if any of these supports audio + frame synchronization, the audio being the primary "feature" of the animation?
    - pavlov 14y ago
      My Radi app supports audio in the latest release: http://radiapp.com http://radiapp.com
  - g2e 14y ago
    Why aren't web animations more popular due to these apps? Is there something wrong with Edge for example?
    - podrivo 14y ago
      these tools are still in development, as well as the technology they are developed to. they are becoming popular. maybe in 2013! (:
    - jQueryIsAwesome 14y ago
      Real animation is expensive; and there are many trade-offs for working with such an unstable and cpu-dependent technology. Besides; video and Flash are still "good enough" for most use cases (children animated series, educational videos, etc).
    - bgilroy26 14y ago
      Unwillingness to appropriate the personnel money (i.e. either hiring people with animating skills or giving a current staff member a raise and having them take on the responsibility of learning to animate) could be a major bottleneck.
  - neovive 14y ago
    You can still download Edge for free since it is still in pre-release. It's sort of a cross between Adobe Flash Professional and After Effects. It definitely has some promise in the web animation front. It's worth a try as it will likely become an industry-standard tool in the near future.
- pavlov 14y ago
  I've been making a HTML5 animation app called Radi: http://radiapp.com http://radiapp.com It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to finish one day.) Unlike Edge, Hype and the rest of the animator apps, Radi uses the HTML5 Canvas element for rendering. The other apps basically do element-level animation using JavaScript + CSS3, whereas Radi renders frames from scratch. This allows advanced features like content keyframes, smoothly scaled brush strokes, etc. Radi also supports HTML5 Video and Audio elements; you can create video effects and realtime Canvas script layers; and there's a minimalist Markdown editor included for text content.
  - panabee 14y ago
    quick question: how are you able to let users render sharp lines on the canvas elem? when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable. here is some sample code: http://jsfiddle.net/NWBV4/10/ http://jsfiddle.net/NWBV4/10/ would you mind sharing how you overcame this issue? thanks!
    - pavlov 14y ago
      You probably need to offset the line coordinates by (0.5, 0.5). This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example. Hopefully that makes some sense (typed on a phone...)
  - coofluence 14y ago
    Thanks Pavlov, I am trying out Radi.
- coofluence 14y ago
  There are other attempts, but either they are limited in scope or ease of use: 1. This Exquisite Forest - https://chrome.google.com/webstore/detail/this-exquisite-forest/illikembakcokcfifcbkneafjjjnckkd?hl=en https://chrome.google.com/webstore/detail/this-exquisite-for... 2. There was (is?) a Motorola Montage project that was available as a Chrome extension "Ninja". It seems to have disappeared. Here is a Git link: https://github.com/motorola-mobility/montage https://github.com/motorola-mobility/montage 3. Adobe Edge animate is there but it is a toy as of now.

MojoJolo 14y ago

Your first difficulty is also my concern / question. Are there still no IDE that can do those animations? I know that there will be in the future. But I hope it will happen soon.

ryanac 14y ago
Edge: http://html.adobe.com/edge http://html.adobe.com/edge A5: http://www.a5-animator.com http://www.a5-animator.com Hippo: http://hippostudios.co.uk http://hippostudios.co.uk Sencha Animator: http://www.sencha.com/products/animator http://www.sencha.com/products/animator Motion Composer: http://www.aquafadas.com/en/motioncomposer http://www.aquafadas.com/en/motioncomposer Mac Only: Purple: http://www.purpleanimator.com http://www.purpleanimator.com Tumult Hype: http://tumult.com/hype http://tumult.com/hype Online/Cloud Based Tools: Mugeda: https://www.mugeda.com https://www.mugeda.com Blysk: http://bly.sk http://bly.sk
- rudasn 14y ago
  Thanks for the list. Do you know if any of these supports audio + frame synchronization, the audio being the primary "feature" of the animation?
  - pavlov 14y ago
    My Radi app supports audio in the latest release: http://radiapp.com http://radiapp.com
- g2e 14y ago
  Why aren't web animations more popular due to these apps? Is there something wrong with Edge for example?
  - podrivo 14y ago
    these tools are still in development, as well as the technology they are developed to. they are becoming popular. maybe in 2013! (:
  - jQueryIsAwesome 14y ago
    Real animation is expensive; and there are many trade-offs for working with such an unstable and cpu-dependent technology. Besides; video and Flash are still "good enough" for most use cases (children animated series, educational videos, etc).
  - bgilroy26 14y ago
    Unwillingness to appropriate the personnel money (i.e. either hiring people with animating skills or giving a current staff member a raise and having them take on the responsibility of learning to animate) could be a major bottleneck.
- neovive 14y ago
  You can still download Edge for free since it is still in pre-release. It's sort of a cross between Adobe Flash Professional and After Effects. It definitely has some promise in the web animation front. It's worth a try as it will likely become an industry-standard tool in the near future.
pavlov 14y ago
I've been making a HTML5 animation app called Radi: http://radiapp.com http://radiapp.com It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to finish one day.) Unlike Edge, Hype and the rest of the animator apps, Radi uses the HTML5 Canvas element for rendering. The other apps basically do element-level animation using JavaScript + CSS3, whereas Radi renders frames from scratch. This allows advanced features like content keyframes, smoothly scaled brush strokes, etc. Radi also supports HTML5 Video and Audio elements; you can create video effects and realtime Canvas script layers; and there's a minimalist Markdown editor included for text content.
- panabee 14y ago
  quick question: how are you able to let users render sharp lines on the canvas elem? when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable. here is some sample code: http://jsfiddle.net/NWBV4/10/ http://jsfiddle.net/NWBV4/10/ would you mind sharing how you overcame this issue? thanks!
  - pavlov 14y ago
    You probably need to offset the line coordinates by (0.5, 0.5). This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example. Hopefully that makes some sense (typed on a phone...)
- coofluence 14y ago
  Thanks Pavlov, I am trying out Radi.
coofluence 14y ago
There are other attempts, but either they are limited in scope or ease of use: 1. This Exquisite Forest - https://chrome.google.com/webstore/detail/this-exquisite-forest/illikembakcokcfifcbkneafjjjnckkd?hl=en https://chrome.google.com/webstore/detail/this-exquisite-for... 2. There was (is?) a Motorola Montage project that was available as a Chrome extension "Ninja". It seems to have disappeared. Here is a Git link: https://github.com/motorola-mobility/montage https://github.com/motorola-mobility/montage 3. Adobe Edge animate is there but it is a toy as of now.