A timeline based animation tool in a browser extension for animating your web content in its original context.

1. open animachine on any web page
2. select nodes for the timeline with css selectors
3. animate
4. save the animation as a .js file
5. include the .js into your app
7. apply the animations and use them as a GSAP timeline
8. open animachine again and continue the editing
see the full docs here

We have great tools to make animations for the web (like Adobe Animate, Google Webdesigner or Animatron) but all of these are only for making sandboxed animations and embedding the boxes somewhere (usually in an iframe). If you need to animate some inner part of your project (ex. when a dialog appears or a game character jumps and walks) it has to be coded by a programmer. When this animation has to be long, artistic or done by somebody who is not a skilled programmer, this work can be tedious or almost impossible which can prevent us from seeing more fine and sophisticated animations on the web.

No, at the moment this is a "proof of concept" and not a matured tool. But if you interested in the idea you should definitely give it a try and keep your eye on it (i tweet and mail about the updates) and maybe help with your thoughts (you can open issues here).

This tool is not done. Subscribe for updates!