
Show HN: A visual HTML5 animation editor in your browser - carizan
http://animatron.com
======
MarcScott
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.

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

------
Trufa
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.

~~~
easy_rider
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.

------
muyuu
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.

~~~
jggonz
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.

~~~
johnbm
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.

~~~
wmeredith
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.

------
bsimpson
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](http://i.imgur.com/yuJzv6p.png)

~~~
skavish
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!

------
tekmate
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

~~~
skavish
thanks!

------
selectout
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!

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

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

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

------
frik

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

~~~
chii
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).

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

~~~
skavish
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 :(

------
hughes
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](http://www.animatron.com/explore#staff-picks)

~~~
carizan
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.

~~~
araes
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.

------
wyuenho
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

~~~
protonfish
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.

~~~
wyuenho
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.

------
yangcanvas
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](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.

~~~
squared9
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! ;-)

------
bunkat
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.

~~~
skavish
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.

~~~
binxbolling
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.

------
WoodenChair
So, this is Hype in the browser:
[http://tumult.com/hype/](http://tumult.com/hype/)

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

------
vram22
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.

~~~
carizan
Cool, thanks! Here's the embed code:

<iframe src="//player.vimeo.com/video/81736441" width="500" height="281"
frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>

~~~
vram22
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.

~~~
carizan
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 :)

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

[http://jugad2.blogspot.in/2014/03/the-html5lib-python-
librar...](http://jugad2.blogspot.in/2014/03/the-html5lib-python-library-
and.html)

~~~
carizan
Cool, thanks so much for writing about us :)

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

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

------
bhouston
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](http://clara.io)

~~~
alexRohde
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.

------
lxe
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!

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

------
anovikov
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.

~~~
skavish
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 :)

~~~
anovikov
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.

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

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

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

~~~
skavish
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.

~~~
anovikov
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.

------
subdane
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?

~~~
skavish
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.

------
alexRohde
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.

~~~
carizan
Thank you!

------
rjf90
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!

~~~
carizan
Cool, let us know what you think!

------
malkia
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)?

~~~
skavish
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.

------
ethana
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.

~~~
ricricucit
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.

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

~~~
skavish
thank you!

------
markjspivey
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...

~~~
carizan
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.

------
dagge
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/](http://tweenui.com/animator/)

What do you think? How does it stack up?

~~~
skavish
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.

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

~~~
carizan
Thanks!

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

~~~
carizan
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](http://tmblr.co/ZGr3es19AumCF)

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

------
reshambabble
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!

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

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

~~~
carizan
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.

------
james2vegas
Logo looks a btit like Duke:
[http://en.wikipedia.org/wiki/File:Wave.svg](http://en.wikipedia.org/wiki/File:Wave.svg)

~~~
carizan
Haha, yeah, some mild resemblance :)

------
monkeynotes
Looks like HN killed your API:

> [http://api.animatron.com/anonymous](http://api.animatron.com/anonymous)
> net::ERR_EMPTY_RESPONSE

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

------
greggman
Was the opening animation made in the tool?

~~~
carizan
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](http://tmblr.co/ZGr3es19AumCF)

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

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

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

~~~
skavish
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

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

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

~~~
cromwellian
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.

~~~
carizan
Wow, thanks for the awesome compliment!

------
wehadfun
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

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

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

~~~
carizan
Not yet, but coming soon ...

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

~~~
carizan
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.

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

~~~
carizan
[http://animatron.com/explore#staff-picks](http://animatron.com/explore#staff-
picks)

------
kafkaesque
What video formats can I export to?

~~~
carizan
webm and mp4, at the moment.

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

~~~
skavish
definitely not layers and masking, may be something else

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

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

------
d55
I'm impressed.

~~~
carizan
Thank you :)

------
jbeja
Que arrecho!.

------
joyeuse6701
slick

------
marukokinno
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 .

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

