Show HN: A visual HTML5 animation editor in your browser | Hacker News Reader

Show HN: A visual HTML5 animation editor in your browser

animatron.com

295 pointscarizan139 comments

It's so refreshing to see a service that requires no signup. Normally a signup acts as a barrier to entry for me, especially when it requires a link to a social media identity. I'm going to have a play around now.

thanks!

Yeah, required signup is a pet peeve for most (all?) of us on the Animatron team as well.

The best products I've signed up for seemed to have this doctrine. I think it also shows confidence in your product!

Wow! I don't have any use for this right now, but I'm in awe!

The landing page is beautiful and the video catching, registration is easy and the tutorial is great, color me impressed.

thanks!

That's great to hear, thank so much!

Everything he said.

Couple points: I checked it on my mobile earlier, and the landing, although still pretty looking, doesn't scale responsively, having a pretty small HTC, it was kinda tedious to fiddle with scrolling left to right/ and which kinda made me forget about it until I noticed the thread again today. Anyway I understand that this wouldn't have been your focus, but maybe it will give you a small % boost :)

In any case, really well put together product, and although I will likely never have use for it myself I'm impressed

One other thing: The introduction video is really cute, and I love your original style and branding. But it hardly provided much information about your product imho, other than what I've already got from the text on your main page.

But maybe this is just a designer/programmer style discrepancy.

Looks interesting but an authoring tool is not something I want to run "in the cloud" and be dependant on a connection and a service that may or may not be there when I need it.

Wouldn't invest much time in a tool that is not available for download, to be honest.

Nevertheless it looks well done.

For me, it would be enough to see their paid plans...

we will be rolling it out in a month or so. but there will always be free plans along with paid ones.

That's good to know - but I was more worried about you being able to go on than about the free plan ;)

Their about page says the company is 15 people… so they must be already going on somehow anyway ;)

Slightly off-topic... Sorry.

If you don't mind me asking, what country are you from?

I ask because I find this strange, since here in the San Francisco bay area, I find it difficult to get 'away' from an internet connection. They're everywhere I go, whether I want it or not. I carry an internet connection on my smartphone and can tether to it whenever I need it. The only time I can't get an internet connection is when I'm in the middle of the woods, and that's just because I'm not paying for AT&T.

Having authoring tools "in the cloud" is the premise for many great services such as Google Apps, Microsoft Office apps, Facebook, Wordpress, etc... Being able to do something as cool as HTML5 authoring without having to invest hundreds of dollars in some Adobe product has great value to many... especially students or young poor people that want to learn and don't want to pirate software to do it.

I'm in London, UK.

I develop on the go a lot, so I do find myself very often with either faulty connections or no connection at all.

Data plan is still relatively expensive in the U.S. $30 for 3GB from AT&T. Can you trust the security of free wifi hotspot? What if you want to do work on a bus or on a train ride? What if your home network is down? A lot of people work remotely from home and they rely on home connection. If this has localstorage and sync that'd be nice. Does it?

And this is why anyone sane who doesn't live there hates your smug filter bubble, and why Android is still a pain to use once you go out of signal range.

Eh, I live in independence, Missouri (Pop. 117,000) and I too, "can hardly get away from the internet". It would certainly be available anywhere I wanted to use something like this, e.g. home, coffee shop, library, co-working space, etc... I guess if I was at the park or on a plane, it wouldn't work.

thanks!

there are two ways to address it. first of all we will add offline support at some point, so you can work offline and when you are online it will sync itself with the cloud.

another possibility we are considering is just to wrap it up into multiplatform desktop app which is technologically not is difficult to do these days.

Yep, I'd suggest looking at Light Table for ideas (or Atom).

I was really excited to try it after watching your cartoon demo, but this is all I see when I open the editor in ChromeOS 34:

http://i.imgur.com/yuJzv6p.png

I am sorry about that. this issue happens only in chrome under linux (which is basically ChromeOS). the good news is that it will be fixed really soon!

Same here

Yes, I was wondering what was going on. A vast expanse of white and no actual tools or anything else. I'm using regular Chrome on Linux. I don't even get as much UI as you do! http://imgur.com/bHLKAsv

that's the kind of user friendly killerapp that made flash so ubiquitous, because everyone and his mom were able to make animations.

While i love canvas, it's downright impossible for non-programmers to do any of the footwork that is needed to create even the most basic animation.

i will certainly keep an eye on this project, great job

thanks!

Would love a paid option of like $5-$10/month that gives me the actual source code so I can just take it and run it on my own stuff. Great work though!

this feature is coming, you will be able to download everything which is needed to play a clip and host it yourself.

There's a lot of nice things about this UI, well done! The difference between "animation" and "design" modes isn't quite obvious at first glance. The switch doesn't tell you anything, so you have to experiment to find out what it means.

I'm happy to see that you're using Canvas for the published animation. It's the only way to go for artistic animation where content needs to update at every frame -- CSS just isn't enough for that.

Some three years ago, I made a HTML5 animation tool that outputs to Canvas + video: http://radiapp.com

Despite all the hours I put in, I never managed to figure out a way to turn it into a real product. I think you will fare better :)

Thanks for the feedback and the compliments! I played around with Radi a while ago and quite liked it :)

  Your browser is too old or not yet supported!

And a link to Chrome frame, a retired Google product.

Please use feature detection instead of sniffing the browser agent. My browser (IE11) is perfectly capable and supports HTML5 APIs fine (e.g. Canvas 2D).

yep, sorry about that. IE11 support is coming really soon.

i suspect they don't use feature detection because the GWT framework makes it a bit more difficult to do feature detection (its not impossible, but it does work against the "default" way of doing things in GWT).

The new JsInterop stuff we're adding to GWT 3.0 will make it a lot easier.

we are really looking forward to GWT 3.0. thanks for all the work you put into it!

but we are really sad devmode will be gone really soon :(

This looks like a really full-featured and powerful animation tool! The tutorial movie was very impressive.

The gallery[0] has some good looking examples, but they all run very slowly (1fps) in both chrome/firefox on my MBP. Not sure why performance is so poor on my machine.

One thing I couldn't figure out from the site is what their revenue model/pricing plan is. I saw that guest accounts are active for 15 days, but what are the limitations after I sign in?

[0] http://www.animatron.com/explore#staff-picks

Also, I tried making a basic animation. When I visited the project's embed link, I just get "snapshot failed to load"!

Can you post the URL of your project in the editor? We'll look at it asap!

I'm not sure what the original project url was. When i clicked "embed", it said I had to clone the project, which I did.

It then redirected me to http://editor.animatron.com/#p=b5da1953a67b29f8d0e00c0c which loaded the identical project (this project seems to no longer exist).

I clicked "embed" again and it showed me the url http://player.animatron.com/go?ea0713ae8d4c50d3a8589aa392c39...

I can see the project in my projects page, but I can't figure out how to edit it from there.

to edit the project from the projects page you need to click small edit icon just below the project. yeah, I know it's not easy to notice, working on that.

http://glui.me/?i=h8i4rdkzwjnuojf/2014-03-07_at_11.37_AM_2x....

Thanks for the compliments! Not sure about what's causing the fps issues, but we're definitely investigating.

At the moment, there aren't any limitations after you sign in - Animatron is free, and the only difference between a registered account and a guest account is that guests can only create one project (which is only saved for 15 days). Pretty soon we'll be rolling out a few different paid-subscription plans that will offer advanced features and functionality, but there will always be the option for a free account.

Similar issue on the FPS using Firefox 24. It all loads (once I let JS do its thing) and can be interacted with (made a quick little movie of a box dancing around, but its like watching a slideshow. With a few optimizations to speed up interactivity, this would be really cool.

I'd love to try this out as I've been looking for something like for a long time. But I can't use it because I can't sign up with a password longer than 16 characters. This is a rookie security mistake that I see over and over again and makes me worry. As a rule of thumb, you should NOT limit the length of a password. Salting will take care of the weak password problem and a long password is, well, the securer the better.

Edit: use a secure hash on the password before storing into the database

Correct assessment - wrong solution. If you hash your passwords the stored result will always be the same fixed length. Do that (which you should anyhow for security reasons) and you don't need to mess with changing your database.

Yep you are right, it's late here on a Friday night and my brain flashed bcrypt and scrypt's differing lengths for a second. Now that I looked back I was like, the hell? LOL oh man thanks for the correction.

we do use PostgreSQL and there are no any restrictions on the length in the database. it seems the limitation only in the UI, will be fixed asap.

Really nice work. A flash-like canvas animation is due gain popularity in the near future.

Your fill-bucket tool is a little freezy, as I'm sure you are aware. I made an HTML5 static image editor http://yangcanvas.com/paint and I found a good fill-bucket tool hard to implement too. Your tools does fill ranges perfectly, which is really nice. Good luck making that work more efficiently without sacrificing precision as I did.

thanks! you have made a nice tool yourself!

yes, the bucket sometimes could be slow/freezy. mostly because there are still some problems in the algo. our editor works with vector, so all operations including bucket basically create new vector shapes based on current geometry. it does not do bitmap fill.

The original Java code for bucket fill is very fast, sub-second fills in most cases however after converting the code to JavaScript the performance gets worse in some specific cases (Bezier offsetting/flattening combined with Boolean operations for non-closed or transparent shapes). There are some advanced math and algorithmic tricks used in the Lasso tool to speed up exactly the same class of problematic cases in JavaScript. Bucket fill is however more complex which doesn't allow straightforward reuse of these algorithms; additional algorithms are currently being developed to deal with it.

Good luck with your nice paint app! ;-)

The tool looks great and everything was really well done, but who is the customer for this?

It seemed like it was for non-designers but when I open the editor I get a blank canvas and I have absolutely no idea where to start to make a professional looking animation. Seems like I would still need to hire a visual designer/graphic artist who would most likely use the tools they are already familiar with.

yeah, you are right. we will be adding lots of stuff to make it much easier for non-designer, libraries of ready to use artwork, characters, clips, sounds, effects etc.

IMO, this is key — although I'm biased, because I'm asking you to cater to me. However, I think I'm not alone: someone a little tech-savvy, but neither a true developer or designer. I think there are lots of people like me who have been forced to wear many hats at work and dabble in many technologies without a ton of expertise, so the ability to quickly meet a small need (in this case, an HTML5 animation) without tons of training or money is enormously valuable.

So, this is Hype in the browser: http://tumult.com/hype/

hype is cool (I have bought the very first version), but html5 tech is different. hype exports to css/dom, animatron to canvas.

Just had a short look at the video right now, going to check more, but looks good. Is there a way to embed the video in a blog post? Would like to blog about it and embed the video. When I right-clicked on the video, it had an option to copy video URL, which I did, but that results only in the link to the video, not the embed code.

Cool, thanks! Here's the embed code:

Thanks for the fast response. Will write the post and update the comment here with the link to it.

BTW, typo in your embed code: missing an "http:" in the value of the src attribute. Works after I add that, not without it.

Strange about the embed code - that's how Vimeo provides it, so it's weird that it didn't work for you, but great that you managed to make it work in the end! Looking forward to reading the post :)

No problem :) Anyway, here's the post:

http://jugad2.blogspot.in/2014/03/the-html5lib-python-librar...

Cool, thanks so much for writing about us :)

You're welcome.

If not confidential, a blog post about the tech used would be interesting.

It's already in the works, actually! We'll post it here on HN pretty soon.

it is not an issue. your browser will use protocol(http or https) it used to load page where you have embedded the video.

>it is not an issue.

Was an issue for me, otherwise I would not have said so, obviously. See my above comment where I said "not without it". Also, I'm aware of this:

http://jugad2.blogspot.in/2014/03/the-protocol-relative-url-...

So it may have been some other issue, but was an issue, for sure.

I really like the interface and the timeline. I also like the learning tooltips. I think that we can learn a lot from your UI design.

BTW I wonder if it is worthwhile to try and hook up an interconnect between this and our 3D modeler/animator/renderer: http://clara.io

thanks! clara.io looks awesome too, I played with it sometime ago when it was released.

it would be interesting to try to connect the tools somehow. plz write me to skavish at animatron.com

Just want to say, from the front page your site looks pretty cool, but I didn't actually get to try the tool because your tool, unlike animatron would require typing before getting to play around with it. If animatron had required an account first there's a 0% chance I would have spent the 25 minutes I did playing around with it.

This is very impressive. As someone who has no idea what I'm doing, I was able to make an animation of a circle moving and growing from left to right in 30 seconds without reading the manual or tutorials. This is how user interfaces should be built!

Awesome, that's exactly what we'd hope to hear :)

Nice, yeah let's make a Flash IDE in a browser, which will compile results into a real .swf, which will then play in an HTML5-based Flash player on any device. Maybe support of a few things like rtmfp protocol will be tricky, but who cares.

that would be too funny :)

but people do all kinds of crazy stuff these days, like running linux in a browser under x86 emulator written in js.

so animatron tech is very very conservative from that perspective :)

I am serious about this. A lot of good stuff is written for Actionscript, all sorts of libraries etc., years worth of good work of many good people. It's just not fair to trash all that effort just because Apple has a tooth on Adobe.

Even without rtmfp, or even without rtmp, that will be very valuable.

oh, well, I thought it was an irony :)

anyway for now our plans in terms of flash do not go beyond exporting to swf.

Why don't add actionscript, at least with limitations?

supporting actionscript by itself without implementing the whole flash model does not make much sense. most of the existing actionscript code use it one way or another.

and implementing flash model is a very serious undertaking.

Someone has to do it, anyways, and you guys are closer to there than anyone else out here. Flash is great but it is stuck between egos of business guys.

Great - all the tools that come close to this have been flash and don't run easily on phones and tablets. I noticed it crashed mobile safari for me. Do you have plans to make this workable for non-desktop users?

yes, mobile has top priority! most of the simple staff works, but some animations don't. we are working really hard to fix all the issues.

I just have to say I tried this out for about 20 minutes (not an artsy guy really) and found it amazing. Very intuitive, clean, fast, and seems entirely free. Highly recommend.

Thank you!

I've been looking for something like this. Powtoons is ok but sucks for someone who wants a little more out of their animation tool. Can't wait to try it out!

Cool, let us know what you think!

I see a lot of 2D/3D/CAD editors on the web - but one simple thing puzzles my mind - how multiple monitors are supported?

Or docking (windows in windows, with maximizing)?

we do not support multiple monitors, but animatron supports collaborative editing which means you can open the same project in several browser windows on 2-3 monitors and edit them at the same time, i.e. have different parts of the project open etc.

and of course you can send a link to your friend and you can both edit the same project and see each other changes.

Reminds me of the early days of Flash 4. Very nice indeed. But flash animations made the web horrible, I don't suspect HTML5 animations will fare any better.

I'm reading from my mobile so I didn't check the tool yet, but I was surprised that nobody was thinking about this. I must agree.

I personally in love with older version of Flash. This reminds me that and I'm gonna use this a lot. Thank you guys.

thank you!

great find for me! i am in design/dev for the learning and development industry, so naturally many teams have strong backgrounds in Flash, and lately Adobe Edge Animate and Tumult Hype (even Google has thrown something into the ring). Literally the only thing I did to determine whether I would investigate Animatron further was opening it up and dropping some audio into the project, and seeing whether the waveform shows up on the timeline layer. This is a MUST regarding WYSIWYG sync of animation to audio... its what Flash IDE had that Edge and Hype still do not! The next thing is determining the workflow for integrating with eLearning standards such as SCORM and TinCanAPI / Experience API... naturally this is the type of product I would also pay premium to integrate further into my team and client's workflow for Instructional Design, etc...

That's great to hear! If you have any questions while you're investigating how to integrate Animatron into your existing workflow, get in touch with us at feedback at animatron.com - maybe we'll be able to help.

I'll have to add a shameless plug to the visual HTML5 editor in the browser that I've built. Also created with GWT, and using GreenSock JS for animations.

Available at http://tweenui.com/animator/

What do you think? How does it stack up?

tweenui is very slick, I was playing with it some time ago, very well done! I like how you did ad campaigns, variations that kind of stuff. we don't have it at the moment, but do have much more advanced drawing/animation.

Wow! This really takes me back to my Flash Animation days. Very cool and slick. I like it.

Thanks!

How much of that demo video was made with the product? 100% would really impress me.

Initially it wasn't made in Animatron, but we're actually in the middle of publishing a video tutorial series about how to do it in the tool: http://tmblr.co/ZGr3es19AumCF

I love how they compare their potential users to easily-distracted cavemen.

Awesome app - love your videos. UI design is great, and love your ease of signing up via social media. Would be really cool if you could sync this with Google Fonts!

support for downloadable fonts and google fonts in particular is in the works!

That's really impressing, very easy and intuitive to use!

Thanks so much - we've spent a lot of time thinking about how to make the tool as intuitive as possible, happy to hear that we've succeeded.

Logo looks a btit like Duke: http://en.wikipedia.org/wiki/File:Wave.svg

Haha, yeah, some mild resemblance :)

Looks like HN killed your API:

> http://api.animatron.com/anonymous net::ERR_EMPTY_RESPONSE

probably some temporary glitch. seems to be working fine now.

Was the opening animation made in the tool?

Not initially, but one of our video tutorial series is actually all about how to create that animation in the tool: http://tmblr.co/ZGr3es19AumCF

Was it very painful to develop this great GUI or is GWT/HTML5 at a point where it's OK?

GWT actually is great, especially if your app is big and there are more than one dev on a team

I know, I'm more concerned about the HTML side.

currently the only html/css left in the app is in the inspector and some dialogs. everything else is drawn on canvas using our own canvas-based ui controls

I really like that it's using GWT too! You don't often see much GWT apps these days.

yeah, we had internal debates whether to use gwt or just js, gwt side won and we (most of us!) do not regret it :)

This is a really stellar app and the compiled JS is quite small. You guys should present at the next GWT conference or I/O.

Wow, thanks for the awesome compliment!

if it's not too private, i'd like to hear about some of the details of the debate you had! What was the arguments against GWT? what was the arguments against pure js?

well, all the arguments are pretty standard :)

gwt pros: - java (excellent tooling, static typing, reliable refactoring) - code splitting and async loading (although we don't use it as much as we thought we would) - easy live debugging in devmode (will be gone soon) - rpc (although we switched to our own) - same model (java classes) on a client and on a server

but frankly most of it is basically java. we knew that the team will be 5-10 devs at least, we knew that the codebase will be big, so the java is obvious choice.

js pros: language a bit nicer (but it sucks anyway comparing to scala which is our server side :), better performance - no gwt wrappers/layers.

Do you have to host in the cloud or can you down load this.

Is there a limit to how long the animations can be

everything is in the cloud. currently there is no limit on the duration

This is amazing! Does it have facilities for frame-by-frame animation and onion-skinning?

Not yet, but coming soon ...

Why are passwords limited to 16 characters? That's unnerving.

Hm, we never thought about it! There's no limit in the database, just client-side restrictions on the input fields ... we'll have to consider.

Where's the Gallery? Can't find it.

http://animatron.com/explore#staff-picks

What video formats can I export to?

animated gif, mp4 and webm

webm and mp4, at the moment.

the discussion on layers and masking reminds me of Gimp, did you take any inspiration from it?

definitely not layers and masking, may be something else

nice, yet too slow for production use right now in my opinion. But it has a great potential.

hey, thanks! we have some performance issues in firefox and safari, but there should not be any problems in chrome.

I'm impressed.

Thank you :)

Que arrecho!.

slick

I still use the tiny lightning fast Macromedia Flash 4 to make simple animations, when its just simple animations, without all the script power, features and Photoshop integration you get with the Adobe 2 Gb in disk elephant. I used to run this Flash 4 in a Pentium 133hz with only 16 MB RAM and it wasn't that slow. I was waiting, wondering why didn't someone bring something like that for HTML5 yet, and Finally it is here! Thank you .

You're welcome ;) thank you for the kind words!

Reply on news.ycombinator.com