Hacker News new | comments | show | ask | jobs | submit login
Show HN: HTML5 online animation editor that exports to SVG and SMIL (animatron.com)
239 points by VasyaPupkin 1078 days ago | hide | past | web | 52 comments | favorite

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.htm... (path rendering)

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.

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.

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?

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.

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.

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 :).

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

IE is probably waiting for Web Animations 1.0 and SVG 2 to be finalized first.

html5 export (based on canvas) will work on all modern browsers anyway, svg+smil is just icing on the cake

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

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

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.

Fair point, and thanks for the kind words!

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.

unfortunately firefox is really slow these days. try it in chrome or safari, it's night and day difference in speed

Looks great on Chrome.

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.

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!

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

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

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.

Sure, you can import jpeg / png images as well as SVGs.

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

thanks, fixing it.

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

not yet, it's coming

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

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

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

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.

thanks, it's been pointed to us today couple of times (thanks NH!), will be fixed asap

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

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

I like it. Excellent work guys.

Going to poke around more this weekend.


It is done in GWT ?

there are some details if you are interested http://blog.jetbrains.com/blog/2014/04/17/animatron-html5-an...

Thanks for the link. So the player is written in JS and the editor in Java-GWT, what are the motivations about this choice ?

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.

Very cool, I'll give it a whirl and see what comes up. Glad to see GWT. Is it Java-GWT?


looks like they are using svg-edit.

Nope, all drawing tools and SVG SMIL animation export are custom made.

hmm, where? we don't use svg-edit nor any other tools

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!

Thanks so much!

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.

(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 :)

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

How could they prove that they're the first? That implies they could prove the non-existence of something.

That's definitely a good point, but my personal reaction in that case would be to not make that claim. Such claims feel insincere to me and I'd rather hear "an excellent tool for creating animations and exporting them to SVG and SMIL" or something similar. I'm not saying I'm a marketing guru by any means, though. Just trying to give my honest feedback as one of the target audience.

Since Universe is Infinite, it is scientifically impossible to prove non-existence of something. Still people tend to claim of being first at something. Americans claim they are first humans walked on the Moon. Is it provable? Did they monitor the Moon all the time it's exists? May be there was another civilization of humans which waked all over the Moon centures ago? Did Columbus discovered America? - there were people living on the land! etc. It is all relative, sure.

Applications are open for YC Winter 2018

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact