
Show HN: HTML5 online animation editor that exports to SVG and SMIL - VasyaPupkin
http://animatron.com/
======
mattdesl
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...](http://mattdesl.github.io/path-
illustrator/demo/advanced.html) (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
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.

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

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

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

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

------
hk__2
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
Thanks for bringing it to our attention - yeah, we noticed it the other day.
It'll be corrected very soon.

------
xuhu
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
Fair point, and thanks for the kind words!

------
anon4
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
unfortunately firefox is really slow these days. try it in chrome or safari,
it's night and day difference in speed

~~~
michaelchisari
Looks great on Chrome.

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

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

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

------
michaelbarton
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
Sure, you can import jpeg / png images as well as SVGs.

------
muthdra
[http://i.imgur.com/qfeS0MD.png](http://i.imgur.com/qfeS0MD.png) I can't read
anything.

~~~
skavish
thanks, fixing it.

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

~~~
skavish
not yet, it's coming

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

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

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

~~~
carizan
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
Newbie to this scene , how would this compare to GreenSock animation ?

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

------
jqm
I like it. Excellent work guys.

Going to poke around more this weekend.

~~~
skavish
thanks!

------
hokkos
It is done in GWT ?

~~~
skavish
there are some details if you are interested
[http://blog.jetbrains.com/blog/2014/04/17/animatron-
html5-an...](http://blog.jetbrains.com/blog/2014/04/17/animatron-
html5-animation-editor-inspired-by-middle-school-homework-assignment/)

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

------
nashashmi
looks like they are using svg-edit.

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

------
innguest
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
Thanks so much!

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

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

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

