7 ms·

Show HN: HTML5 online animation editor that exports to SVG and SMIL

239 points by VasyaPupkin 12y ago

column 12y ago
Very impressed with your work. As a user I encountered 2 minor issues: 1. to dismiss the video tutorial I (mis)clicked "anywhere" I should have had to click on a "Got it!" button. 2. to export my small animation I clicked on the Gear icon, which let me choose "HTML5/GIF/Video", and then I was puzzled as to how to proceed (didn't really think about that "PUBLISH" next to the gear as a button). Would it be possible to add a "PUBLISH" link within the gear popup?
- carizan 12y ago
  Thanks for the compliment and the suggestions! I can see how the publishing UI is kind of confusing - we'll figure out how to simplify it.
hk__2 12y ago
Note: you have trailing text at the end of the first hover box on the starter kit: http://cl.ly/image/0P1i0k0A1T3P/note.png http://cl.ly/image/0P1i0k0A1T3P/note.png
- carizan 12y ago
  Thanks for bringing it to our attention - yeah, we noticed it the other day. It'll be corrected very soon.
nashashmi 12y ago
looks like they are using svg-edit.
- squared9 12y ago
  Nope, all drawing tools and SVG SMIL animation export are custom made.
- skavish 12y ago
  hmm, where? we don't use svg-edit nor any other tools
xuhu 12y ago
Notification about not being to save someone else's scene keeps popping up after I hit Dismiss. I know I can't save but annoying nonetheless. Otherwise feels quite polished and impressive overall.
- carizan 12y ago
  Fair point, and thanks for the kind words!
troymc 12y ago
According to CanIUse.com [1], SMIL is supported by all modern browsers except IE and Opera Mini. I guess the idea is to provide an animated GIF or video fallback for those browsers? [1] http://caniuse.com/#feat=svg-smil http://caniuse.com/#feat=svg-smil
- skavish 12y ago
  html5 export (based on canvas) will work on all modern browsers anyway, svg+smil is just icing on the cake
- squared9 12y ago
  IE is probably waiting for Web Animations 1.0 and SVG 2 to be finalized first.
hokkos 12y ago
It is done in GWT ?
- skavish 12y ago
  yes
- skavish 12y ago
  there are some details if you are interested http://blog.jetbrains.com/blog/2014/04/17/animatron-html5-animation-editor-inspired-by-middle-school-homework-assignment/ http://blog.jetbrains.com/blog/2014/04/17/animatron-html5-an...
  - hokkos 12y ago
    Thanks for the link. So the player is written in JS and the editor in Java-GWT, what are the motivations about this choice ?
    - skavish 12y ago
      the player is relatively small piece of JS code and most of the time there is only one developer working on it. on the other hand the editor is quite large application and the team is 9 developers. developing this kind of app in Java with the help of excellent java tools is just much easier and maintainable than in JS.
  - razster 12y ago
    Very cool, I'll give it a whirl and see what comes up. Glad to see GWT. Is it Java-GWT?
egypturnash 12y ago
The first time I looked, I got the scientist standing in front of test tubes animation. Which has bubbles floating up at about 4fps on my iPad Air. Reloading showed other animations that moved at much more pleasing framerates; you might wanna get rid of that one! On that first load I also had some framerate stuttering on the sample animations at the bottom I tried, and all of them had the loading circle flicker like crazy. Then it crashed Mobile Safari. Looks cool though, I may try poking at it soon when I have some free time. I haven't really done much animation since I left Hollywood.
- shamansir 12y ago
  It happens for Mobile Safari for the last stable version of Player, unfortunately. But we have one newer version behind the back, which supposed to work much faster there, it's just a bit less stable to be deployed now. So yes, please don't forget about us :).
andrewstuart2 12y ago
I've always viewed "first ever" or "best ever" or really any superlative claim with huge prejudice. As in, that's quite a claim to be making without providing evidence. On the plus side, I couldn't find that claim anywhere on the site. My point and suggestion being, try to avoid making claims like that if you can't or don't support them. Perhaps I'm a rare pragmatic fuddy-duddy, but pure marketing hype really turns me off of a product/service.
- skavish 12y ago
  (cofounder here) after we implemented svg+smil export I was searching for some tool which does it as well, but could not find anything. i am not saying it does not exist, but we just could not find it. if you know it please let us know, we will stop claiming it :)
  - andrewstuart2 12y ago
    As I just mentioned below [1], I'm just trying to give my feedback on the title and the fact that it (along with most superlatives) feels insincere to me when other great marketing points are available. It also doesn't tell me the things I'd like to hear, such as the feature set or some defining characteristic/feature, aside from "first to market." I'd actually take the opinion that it's a high-risk low-reward claim to make. Either you're wrong, and your audience will know, or you're right. If you're the first, though, most people in a given target audience probably would have noticed without it being mentioned. Heck, if you're not the first but they haven't heard of another, they might assume you were first and not even think to look into the claim (thus discovering alternative products). If I'm way off base (or if not), feel free to disregard my comments. As always, though, I like learning why I'm wrong when I am. Also, rereading my initial comment, I may have come across as more hostile than I meant to. "Huge prejudice" should probably read "skepticism". [1] https://news.ycombinator.com/item?id=8428619 https://news.ycombinator.com/item?id=8428619
- Franciscouzo 12y ago
  How could they prove that they're the first? That implies they could prove the non-existence of something.
razster 12y ago
I really, really enjoyed browsing other user animation - especially this individuals: http://animatron.com/users/wps http://animatron.com/users/wps
innguest 12y ago
I like this a lot. Obviously a lot of work and research went into this. Congratulations for the directed effort and the amazing results. On top of that, I'd like to thank you for helping rid the internet of HTML+CSS+JS. I can't wait for this madness to go away. This triple of hell is woefully inadequate (abstraction-level wise) for a programmer to communicate to a computer what they want an animation to do. Moreover, this is a contribution to the animation field, which is an incredibly powerful way to communicate ideas, stifled only by the barrier of entry of the existing tools. Any new tool that lowers that barrier deserves praise. In other words, nice going!
- carizan 12y ago
  Thanks so much!
michaelbarton 12y ago
This looks great, I would like to try it. Can I import graphics I have already created, for example in Inkscape? I would like to use existing assets I already have.
- carizan 12y ago
  Sure, you can import jpeg / png images as well as SVGs.
mattdesl 12y ago
This looks great. I've also been exploring path rendering and timeline playback in the browser, see here: http://mattdesl.github.io/path-illustrator/demo/advanced.html http://mattdesl.github.io/path-illustrator/demo/advanced.htm... (path rendering) https://github.com/mattdesl/keytime https://github.com/mattdesl/keytime (generic timeline) IMHO the best thing for these tools to do is give more control to the developer. Things like JSON export, custom plugins, etc. This way we can use the timeline and UI tools to drive canvas, WebGL, and even generic animations like audio volume or gravity in a game. Otherwise you risk the tools "fading away" as the landscape changes, and running into the same limitations as Dreamweaver/Macaw/EdgeAnimate.
- skavish 12y ago
  wow, I really like your demos! especially the timeline based. really cool and inspiring. anyway you are right about giving more control to developers, we are working on that.
Pistos2 12y ago
To site author(s): Just FYI, the landing page is blank until you accept cookies.
- skavish 12y ago
  thanks, it's been pointed to us today couple of times (thanks NH!), will be fixed asap
- carizan 12y ago
  Yes, we do need cookies enabled to display the page properly - we're putting a notification message there so at least there will be some explanation for visitors who see nothing but a blank screen initially, it's definitely disconcerting otherwise.
taivare 12y ago
Newbie to this scene , how would this compare to GreenSock animation ?
- skavish 12y ago
  greensock is a JS library, you need to code animations, while Animatron is authoring tool, i.e. you create animations visually without coding.
niutech 12y ago
As an alternative, try Google Web Designer (free), Mixeek (free) or Sencha Animator ($199).
anon4 12y ago
Woah. These run almost as fast as Macromedia used to run on a Pentium 1! Maybe just 20 more years and browsers will finally catch up to 1995 technology. In all seriousness, it really is too slow - the landing page animations play in about 2fps and the editor itself needs half a second to light up a button when I hover it. I'm running firefox 32.0.1 on Linux with integrated intel video, if it matters. Sadly your time might be better spent improving firefox/chromium so that the next generation will have a platform on which to implement your idea.
- skavish 12y ago
  unfortunately firefox is really slow these days. try it in chrome or safari, it's night and day difference in speed
  - michaelchisari 12y ago
    Looks great on Chrome.
nacs 12y ago
The product looks good but the signup has some issues. 1) When I register, it immediately takes me to the login page 2) When I try to login, it kept saying "Bad email or password" 3) So then I try to register again and it says email is already used 4) Finally check email and click activation link then signin works Either add a message after signup saying activation is required or say activation is required instead of "bad username/password" on signin attempts.
- skavish 12y ago
  thanks for feedback! we do show a message right after the registration saying that email has been sent and you need to click there to confirm. either it was not shown for whatever reason or you did not notice it or something like that. anyway, we will rethink the process, so that things like that won't happen. thanks again!
- deleted 12y ago
  [deleted]
vbl 12y ago
I'd like to initiate an animation based on a button event (clicking another object). Am I missing that feature?
- skavish 12y ago
  until recently we had JS scripting support in the editor, i.e. you could write logic in JS and attach it to various UI elements etc. we disabled it about one month ago because of major JS API overhaul. we will enable it back in about one month or so and you will be able to do that and many other things in a clip. sorry about that
jqm 12y ago
I like it. Excellent work guys. Going to poke around more this weekend.
- skavish 12y ago
  thanks!
misterblix 12y ago
Awesome! Is it possible to animate single points or curves? Couldn't work out how it's done without moving the whole shape.
- skavish 12y ago
  not yet, it's coming
muthdra 12y ago
http://i.imgur.com/qfeS0MD.png http://i.imgur.com/qfeS0MD.png I can't read anything.
- skavish 12y ago
  thanks, fixing it.
deleted 12y ago
[deleted]

239 points by VasyaPupkin 12y ago

Very impressed with your work. As a user I encountered 2 minor issues: 1. to dismiss the video tutorial I (mis)clicked "anywhere" I should have had to click on a "Got it!" button. 2. to export my small animation I clicked on the Gear icon, which let me choose "HTML5/GIF/Video", and then I was puzzled as to how to proceed (didn't really think about that "PUBLISH" next to the gear as a button). Would it be possible to add a "PUBLISH" link within the gear popup?

carizan 12y ago
Thanks for the compliment and the suggestions! I can see how the publishing UI is kind of confusing - we'll figure out how to simplify it.

hk__2 12y ago

Note: you have trailing text at the end of the first hover box on the starter kit: http://cl.ly/image/0P1i0k0A1T3P/note.png http://cl.ly/image/0P1i0k0A1T3P/note.png

carizan 12y ago
Thanks for bringing it to our attention - yeah, we noticed it the other day. It'll be corrected very soon.

nashashmi 12y ago

looks like they are using svg-edit.

squared9 12y ago
Nope, all drawing tools and SVG SMIL animation export are custom made.
skavish 12y ago
hmm, where? we don't use svg-edit nor any other tools

xuhu 12y ago

Notification about not being to save someone else's scene keeps popping up after I hit Dismiss. I know I can't save but annoying nonetheless. Otherwise feels quite polished and impressive overall.

carizan 12y ago
Fair point, and thanks for the kind words!

troymc 12y ago

According to CanIUse.com [1], SMIL is supported by all modern browsers except IE and Opera Mini. I guess the idea is to provide an animated GIF or video fallback for those browsers? [1] http://caniuse.com/#feat=svg-smil http://caniuse.com/#feat=svg-smil

skavish 12y ago
html5 export (based on canvas) will work on all modern browsers anyway, svg+smil is just icing on the cake
squared9 12y ago
IE is probably waiting for Web Animations 1.0 and SVG 2 to be finalized first.

hokkos 12y ago

It is done in GWT ?

skavish 12y ago
yes
skavish 12y ago
there are some details if you are interested http://blog.jetbrains.com/blog/2014/04/17/animatron-html5-animation-editor-inspired-by-middle-school-homework-assignment/ http://blog.jetbrains.com/blog/2014/04/17/animatron-html5-an...
- hokkos 12y ago
  Thanks for the link. So the player is written in JS and the editor in Java-GWT, what are the motivations about this choice ?
  - skavish 12y ago
    the player is relatively small piece of JS code and most of the time there is only one developer working on it. on the other hand the editor is quite large application and the team is 9 developers. developing this kind of app in Java with the help of excellent java tools is just much easier and maintainable than in JS.
- razster 12y ago
  Very cool, I'll give it a whirl and see what comes up. Glad to see GWT. Is it Java-GWT?

egypturnash 12y ago

The first time I looked, I got the scientist standing in front of test tubes animation. Which has bubbles floating up at about 4fps on my iPad Air. Reloading showed other animations that moved at much more pleasing framerates; you might wanna get rid of that one! On that first load I also had some framerate stuttering on the sample animations at the bottom I tried, and all of them had the loading circle flicker like crazy. Then it crashed Mobile Safari. Looks cool though, I may try poking at it soon when I have some free time. I haven't really done much animation since I left Hollywood.

shamansir 12y ago
It happens for Mobile Safari for the last stable version of Player, unfortunately. But we have one newer version behind the back, which supposed to work much faster there, it's just a bit less stable to be deployed now. So yes, please don't forget about us :).

andrewstuart2 12y ago

I've always viewed "first ever" or "best ever" or really any superlative claim with huge prejudice. As in, that's quite a claim to be making without providing evidence. On the plus side, I couldn't find that claim anywhere on the site. My point and suggestion being, try to avoid making claims like that if you can't or don't support them. Perhaps I'm a rare pragmatic fuddy-duddy, but pure marketing hype really turns me off of a product/service.

skavish 12y ago
(cofounder here) after we implemented svg+smil export I was searching for some tool which does it as well, but could not find anything. i am not saying it does not exist, but we just could not find it. if you know it please let us know, we will stop claiming it :)
- andrewstuart2 12y ago
  As I just mentioned below [1], I'm just trying to give my feedback on the title and the fact that it (along with most superlatives) feels insincere to me when other great marketing points are available. It also doesn't tell me the things I'd like to hear, such as the feature set or some defining characteristic/feature, aside from "first to market." I'd actually take the opinion that it's a high-risk low-reward claim to make. Either you're wrong, and your audience will know, or you're right. If you're the first, though, most people in a given target audience probably would have noticed without it being mentioned. Heck, if you're not the first but they haven't heard of another, they might assume you were first and not even think to look into the claim (thus discovering alternative products). If I'm way off base (or if not), feel free to disregard my comments. As always, though, I like learning why I'm wrong when I am. Also, rereading my initial comment, I may have come across as more hostile than I meant to. "Huge prejudice" should probably read "skepticism". [1] https://news.ycombinator.com/item?id=8428619 https://news.ycombinator.com/item?id=8428619
Franciscouzo 12y ago
How could they prove that they're the first? That implies they could prove the non-existence of something.

razster 12y ago

I really, really enjoyed browsing other user animation - especially this individuals: http://animatron.com/users/wps http://animatron.com/users/wps

innguest 12y ago

I like this a lot. Obviously a lot of work and research went into this. Congratulations for the directed effort and the amazing results. On top of that, I'd like to thank you for helping rid the internet of HTML+CSS+JS. I can't wait for this madness to go away. This triple of hell is woefully inadequate (abstraction-level wise) for a programmer to communicate to a computer what they want an animation to do. Moreover, this is a contribution to the animation field, which is an incredibly powerful way to communicate ideas, stifled only by the barrier of entry of the existing tools. Any new tool that lowers that barrier deserves praise. In other words, nice going!

carizan 12y ago
Thanks so much!

michaelbarton 12y ago

This looks great, I would like to try it. Can I import graphics I have already created, for example in Inkscape? I would like to use existing assets I already have.

carizan 12y ago
Sure, you can import jpeg / png images as well as SVGs.

mattdesl 12y ago

This looks great. I've also been exploring path rendering and timeline playback in the browser, see here: http://mattdesl.github.io/path-illustrator/demo/advanced.html http://mattdesl.github.io/path-illustrator/demo/advanced.htm... (path rendering) https://github.com/mattdesl/keytime https://github.com/mattdesl/keytime (generic timeline) IMHO the best thing for these tools to do is give more control to the developer. Things like JSON export, custom plugins, etc. This way we can use the timeline and UI tools to drive canvas, WebGL, and even generic animations like audio volume or gravity in a game. Otherwise you risk the tools "fading away" as the landscape changes, and running into the same limitations as Dreamweaver/Macaw/EdgeAnimate.

skavish 12y ago
wow, I really like your demos! especially the timeline based. really cool and inspiring. anyway you are right about giving more control to developers, we are working on that.

Pistos2 12y ago

To site author(s): Just FYI, the landing page is blank until you accept cookies.

skavish 12y ago
thanks, it's been pointed to us today couple of times (thanks NH!), will be fixed asap
carizan 12y ago
Yes, we do need cookies enabled to display the page properly - we're putting a notification message there so at least there will be some explanation for visitors who see nothing but a blank screen initially, it's definitely disconcerting otherwise.

taivare 12y ago

Newbie to this scene , how would this compare to GreenSock animation ?

skavish 12y ago
greensock is a JS library, you need to code animations, while Animatron is authoring tool, i.e. you create animations visually without coding.

niutech 12y ago

As an alternative, try Google Web Designer (free), Mixeek (free) or Sencha Animator ($199).

anon4 12y ago

Woah. These run almost as fast as Macromedia used to run on a Pentium 1! Maybe just 20 more years and browsers will finally catch up to 1995 technology. In all seriousness, it really is too slow - the landing page animations play in about 2fps and the editor itself needs half a second to light up a button when I hover it. I'm running firefox 32.0.1 on Linux with integrated intel video, if it matters. Sadly your time might be better spent improving firefox/chromium so that the next generation will have a platform on which to implement your idea.

skavish 12y ago
unfortunately firefox is really slow these days. try it in chrome or safari, it's night and day difference in speed
- michaelchisari 12y ago
  Looks great on Chrome.

nacs 12y ago

The product looks good but the signup has some issues. 1) When I register, it immediately takes me to the login page 2) When I try to login, it kept saying "Bad email or password" 3) So then I try to register again and it says email is already used 4) Finally check email and click activation link then signin works Either add a message after signup saying activation is required or say activation is required instead of "bad username/password" on signin attempts.

skavish 12y ago
thanks for feedback! we do show a message right after the registration saying that email has been sent and you need to click there to confirm. either it was not shown for whatever reason or you did not notice it or something like that. anyway, we will rethink the process, so that things like that won't happen. thanks again!
deleted 12y ago
[deleted]

vbl 12y ago

I'd like to initiate an animation based on a button event (clicking another object). Am I missing that feature?

skavish 12y ago
until recently we had JS scripting support in the editor, i.e. you could write logic in JS and attach it to various UI elements etc. we disabled it about one month ago because of major JS API overhaul. we will enable it back in about one month or so and you will be able to do that and many other things in a clip. sorry about that

jqm 12y ago

I like it. Excellent work guys. Going to poke around more this weekend.

skavish 12y ago
thanks!

misterblix 12y ago

Awesome! Is it possible to animate single points or curves? Couldn't work out how it's done without moving the whole shape.

skavish 12y ago
not yet, it's coming

muthdra 12y ago

http://i.imgur.com/qfeS0MD.png http://i.imgur.com/qfeS0MD.png I can't read anything.

skavish 12y ago
thanks, fixing it.

deleted 12y ago

[deleted]